Is it possible to make a pulsating text effect where given a string of text "Hello World", every few seconds it eases from green to blue, then blue to green, green to blue, blue to green without a single line of javascript? (does there happen to be any SCSS or SASS shortcuts?)

Is it possible to make a pulsating text effect where given a string of text "Hello World", every few seconds it eases from green to blue, then blue to green, green to blue, blue to green without a single line of javascript? (does there happen to be any SCSS or SASS shortcuts?)

• javascript
• css

• 2 Yes it is. What have you tried / what do you think that's a good start? – Bram Vanroy Commented Jun 14, 2013 at 17:55
• Did any of the solutions help? Please select an answer if possible. – Chris Mukherjee Commented Jun 19, 2013 at 21:56

3 Answers 3

Here's the CSS3 for what you want:

.textClass {
 -webkit-animation: color_change 1s infinite alternate;
 -moz-animation: color_change 1s infinite alternate;
 -ms-animation: color_change 1s infinite alternate;
 -o-animation: color_change 1s infinite alternate;
 animation: color_change 1s infinite alternate;
}

@-webkit-keyframes color_change {
 from { color: blue; }
 to { color: green; }
}
@-moz-keyframes color_change {
 from { color: blue; }
 to { color: green; }
}
@-ms-keyframes color_change {
 from { color: blue; }
 to { color: green; }
}
@-o-keyframes color_change {
 from { color: blue; }
 to { color: green; }
}
@keyframes color_change {
 from { color: blue; }
 to { color: green; }
}

<p class="textClass">Hello World</p>

Read: http://tjvantoll.com/2012/02/20/CSS3-Color-Animations/ for more info

Yep:

@keyframes textColorChange {
    0% {color: #0000ff;}
    50% {color: #00ff00;}
    100% {color: #0000ff;}
}
/* Use @-webkit-keyframes for Safari/Chrome */

#textElement {
    animation: textColorChange 2s infinite;
}
/* Use -webkit-animation for Safari/Chrome */

Try this :

CSS:

@-webkit-keyframes altrclr{
  0%{
    color:red;
  }
  50%{
    color:green;
  }
}

#a{
  margin:40%;
  font-size:20px;
  color:red;
  -webkit-animation: altrclr 3s infinite alternate;  
  -webkit-transform:scale(4);
}

Html

<div id='a'>
    Hello World
</div>

Demo