ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 199

@keyframes horizontal-left-600 {
from {transform: translateX(600px);}
to {transform: translateX(0px);}
}
NOTE: Yo u m i g h t t h i n k t h a t h av i n g p r e s e n t a t i o n a l a n i m a t i o n n a m e s
goes against the semantic best practices we hold dear, but think
about it. Animations are entirely presentational, and you can
apply them to multiple elements, so the semantics will change.
Presentational is best in this case!
To a p p l y t h e s e a n i m at i To n s t To t h e d i ffe re nt p i e ce s To f t e x t , yo u' l l u s e r u l e s l i like t h i s :
#ad h2 {
animation: horizontal-left-150 1s 1 1s backwards;
}
#ad #band-name {
animation: horizontal-right-400 2s 1 2.5s backwards;
}
#ad #album-name {
animation: horizontal-right-500 2s 1 3.5s backwards;
}
#ad #frame1 ul {
animation: horizontal-left-600 2s 1 4.5s backwards;
}