HTML and CSS Reference
In-Depth Information
@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;
Search WWH ::

Custom Search