Pulsate text CSS3 only?

Issue

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?)

Solution

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

Answered By - Chris Mukherjee