HTML and CSS Reference
In-Depth Information
Figure 21-1. The background fades in and out just long enough to draw attention to the item
Previously, i have avoided using new HTmL5 elements, such as <article> because iE 8 and earlier don't
style them without the help of JavaScript. However, all browsers that support animations also support HTmL5.
Setting the Timing Function Between Keyframes
The animation-timing-function controls the pace at which the browser calculates intermediate property
values. Although you can apply the same value to the whole animation, it affects the transition between
individual keyframes, not the animation from start to finish.
There are two ways to set the timing function. You can set it for individual keyframes in the @keyframes rule
as shown earlier in this chapter. Alternatively, you can set it in the style rule that applies the animation to the
element. Timing functions are applied in the following order:
Values in @keyframes rules always take precedence.
If a timing function hasn't been set for an individual keyframe in the @keyframes rule,
the value in the element's style rule is used.
If a timing function hasn't been set in either place, the default ease is used.
Search WWH ::

Custom Search