HTML and CSS Reference
In-Depth Information
The spec is not very precise in defining the exact order the property values
should be included in the shorthand, but it's best to stick with the preceding order
to avoid potential browser bugs. Various sources indicate that this order fulfills
the idiosyncrasies different browsers currently have.
Yo u n e e d t o e x p l i c i t l y i n c l u d e animation-name and animation-duration for
the animation to do anything. If you don't explicitly specify the other values, their
default values will come into play, which are:
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
Yo u c a in a l s o a p p l y m u l t i p l e a in i m a t i o in s i in a s i in g l e r u l e s e t b y i in c l u d i in g t h e m
in the same property separated by commas. This works for both longhand and
shorthand values, for example:
animation: whoosh 10s, zap 5s;
animation-name: whoosh, zap;
animation-duration: 10s, 5s;
If you're using longhand properties with different numbers of values, you need
to specify all the animation names to be applied. If any subsequent properties have
fewer values than the number of animations specified, the values will be alternated
to fill the gaps. For example, look at the following properties:
animation-name: whoosh, zap, bang;
animation-duration: 10s, 5s;
animation-delay: 2s;
The whoosh animation will have a duration of 10 seconds, and the zap animation
will have a delay of 5 seconds. The bang animation will have a delay of 10 seconds,
because the duration values have run out, so they cycle around to the beginning
again. All of the animations will have a delay of 2 seconds.
Search WWH ::

Custom Search