September 27, 2014

How to create a gradient animation using CSS3?

How to create a gradient animation using css

Earlier people used GIF to bring the gradient animation effect. Now it became much easier with CSS3 animation. Where the linear gradient is applied to the text and CSS3 animation is used. It is so colourful according to the colours you use. This effect has been much simpler and controlled fully by CSS.

HTML

<h1 class="gradeffect">The Little Techie - www.thelittletechie.blogspot.com</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

body {
  background: #000;
}
.gradeffect {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 2.4em;
  margin: 0 auto;
  padding: 0 0 0 0;
  display: inline;
  margin-bottom: 0;
}

.gradeffect {
  text-align: center;
  color: rgba(255,255,255,0.1);

background: #ed8080; /* Old browsers */
background: -moz-linear-gradient(left,  #ed8080 0%, #2a77d6 16%, #5eb524 32%, #eacd25 48%, #ed8080 64%, #2a77d6 80%, #5eb524 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ed8080), color-stop(16%,#2a77d6), color-stop(32%,#5eb524), color-stop(48%,#eacd25), color-stop(64%,#ed8080), color-stop(80%,#2a77d6), color-stop(100%,#5eb524)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* IE10+ */
background: linear-gradient(to right,  #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8080', endColorstr='#5eb524',GradientType=1 ); /* IE6-9 */

    
  -webkit-background-size: 300% 300%;
  -moz-background-size: 300% 300%;
  background-size: 300% 300%;

  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
    
            animation:gradeffect infinite 3s linear;
         -o-animation:gradeffect infinite 3s linear;
       -moz-animation:gradeffect infinite 3s linear;
    -webkit-animation:gradeffect infinite 3s linear;

  background-repeat: no-repeat;
  background-position: top left;
  background-color: #222;
}

@-moz-keyframes gradeffect {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-webkit-keyframes gradeffect {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-o-keyframes gradeffect {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@keyframes gradeffect {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
demo

No comments:

Post a Comment

Popular Posts

Views