HTML and CSS Reference
In-Depth Information
The animation CSS property in this example is written in shorthand and is, once
again, vendor specific. Table 5-2 lists the parameters that the animation
property takes in order.
Table 5-2.
CSS Animation Properties
Property
Description
Values/Options
[-moz-|-webkit-]animation-
name
The name of the animation to
apply to the element
—
[-moz-|-webkit-]animation-
duration
The duration of the animation
in seconds
X
s
[-moz-|-webkit-]animation-
timing-function
linear
,
ease
,
ease-in
,
ease-
out
,
ease-in-out
,
cubic-
bezier
The timing function to use;
the default is
ease
[-moz-|-webkit-]animation-
delay
The number of seconds to
delay the transition by
X
s
[-moz-|-webkit-]animation-
iteration-count
The number of times to
repeat the animation; the
default is 1
Integer
[-moz-|-webkit-]animation-
direction
normal
,
alternate
Tells the animation whether
or not to play the animation
back in reverse on alternate
cycles; e.g., if you specify 2
as the
animation-iteration-
count
, the animation will play
backward on the second
iteration
[-moz-|-webkit-]animation-
play-state
running
,
paused
Specifies whether the
animation is playing or not;
this can be modified using
JavaScript
When you load the animation on your device, it should automatically play. It's
not a very smooth bouncing ball, but this is just to prove that CSS can be a very
powerful tool for animations, with little effort. You can also use JavaScript to
dynamically script CSS animations. For more intensive animations there is also
HTML5 Canvas.
