CHAPTER 11. HOVER AND PSEUDO CLASSES 122
11.5.2 Animation
Animation is like transition, but it does not have a trigger. It just starts
running when the webpage loads. You can have it repeat the same animation
over and over, either forever or up to a limit.
11.5.3 Transition Attributes
Transition and animation have four attributes: the property to be animated,
the duration of the transition, the shape of the timing curve, and the delay
before transition starts. You express it like this as part of your CSS.
transition: property duration timing delay;
Property:You cannot omit this, but you can specify the keyword “all” to
refer to all properties. The property is the thing that will be changed grad-
ually. Common examples include width, height, background-color, color,
opacity, font-size, and padding.
Duration:You should not omit this. If you do omit duration, it defaults to
zero, and the transition is instantaneous, which kind of defeats the purpose
of having a transition. It is expressed as a number followed by the letter s
(meaning seconds). For example, 2s means two seconds.
Delay: You can safely omit this. If you do, it defaults to zero (seconds).
It will wait this long before starting the transition. It is expressed as a
number followed by the letter s (meaning seconds). For example, 2s means
two seconds.
Timing: You can safely omit this. If you do, it defaults to “ease” which
means it starts out slow, increases in speed, and then ends up slow. The
list of pre-defined timing functions includes: ease, ease-out, linear, step-end,
and steps(n,end). You can also specify your curve exactly using B ́ezier curve
parameters.
11.5.4 Animating Several Properties Differently
You can manage several properties at the same time. The syntax is to make
a comma-separated list of attributes and their timings. For example:
transition: width 2s, height 2s, opacity 4s;