Assistance needed with CSS3 Animation Keyframes - html

Question

You can see what I have so far here: http://codepen.io/joe/pen/mkjxi
My goal is to make the lines of text appear in a staggered way, giving a nice effect to the homepage of a site.
My problem is that the 3 bottom lines of text end up reverting back to white. The reason I had made the text transition from white to black is only because I couldn't get display:none or visibility:hidden; to work with the keyframes...
Any help is greatly appreciated! Thanks

Answer 1

The trick is to make use of the forwards value in the animation shorthand property. This changes the fill mode and keeps the last keyframe visible after the animation has run.
Also, there is no need to use separate animations, you could do it with only one. Here is how:
<!-- HTML -->
<div class="text1">Expert Electricians.</div>
<div class="text2">Serving all of Los Angeles,</div>
<div class="text3">Ventura and Orange Counties</div>
<div class="text4">For over 20 years</div>
​
/* CSS */
div {
color: #fff;
text-transform:uppercase;
}
.text1 {
-webkit-animation:text 2s .5s forwards;
-moz-animation:text 2s .5s forwards;
-o-animation:text 2s .5s forwards;
animation:text 2s .5s forwards;
}
.text2 {
-webkit-animation:text 2s 1s forwards;
-moz-animation:text 2s 1s forwards;
-o-animation:text 2s 1s forwards;
animation:text 2s 1s forwards;
}
.text3 {
-webkit-animation:text 2s 1.5s forwards;
-moz-animation:text 2s 1.5s forwards;
-o-animation:text 2s 1.5s forwards;
animation:text 2s 1.5s forwards;
}
.text4 {
-webkit-animation:text 2s 2s forwards;
-moz-animation:text 2s 2s forwards;
-o-animation:text 2s 2s forwards;
animation:text 2s 2s forwards;
}
#-webkit-keyframes text {
100% {color:#000;}
}
#-moz-keyframes text {
100% {color:#000;}
}
#-o-keyframes text {
100% {color:#000;}
}
#keyframes text {
100% {color:#000;}
}​
Here is a live example: http://jsfiddle.net/joshnh/2Sp48/