Chapter 13

Since the release of the book two changes have been intro­duced to the CSS Animations mod­ule. The first is a new value for the animation-timing-function prop­erty, which is the steps() func­tion. This accepts as a value any whole num­ber, and runs the anim­a­tion in that num­ber of frames. For example:

@keyframes leftright {
  from { left: 0; }
  to { left: 100px; }
}
div { animation: leftright 4s steps(20) infinite; }

In this example the div would move from left to right over four seconds, but would do it in 20 steps rather than one smooth move­ment. You can see this in action in Example 13-4a.

Also new is the animation-fill-mode prop­erty. This sets how the selec­ted ele­ment will be dis­played when an anim­a­tion has fin­ished run­ning or is delayed. A value of back­wards applies the styles from the 0% or from key­frame, while a value of for­wards will apply the styles from the 100% or to key­frame (other pos­sible val­ues are none or both).

div { animation-fill-mode: forwards; }

This is easier demon­strated, so take a look at Example 13-4b. The ele­ment on the left has the for­wards value, and on the right, back­wards. When the anim­a­tion has fin­ished run­ning you can see the dif­fer­ence. If you’re still unclear, MDN has more inform­a­tion on animation-fill-mode.

Both of these new fea­tures are imple­men­ted in WebKit, Firefox, and IE10 Platform Preview.

— 10 November, 2011

The ver­sion of IE10 which is avail­able in the Windows 8 Developer Preview sup­ports CSS Animations and Transitions, so the examples in Chapter 13 have been updated to reflect that.

Bear in mind that these fea­tures are not con­firmed for the final release of IE10, but there’s a good chance they will be. Also note: Animations is not cur­rently 100% com­pli­ant with the spe­cific­a­tion — this should hope­fully be resolved before release.

— 25 September, 2011

The @keyframes at-rule and animation prop­er­ties are now sup­por­ted with the -moz- pre­fix in Firefox 5 (cur­rently in Beta), and Example 13–4 has been updated to reflect this. However, in accord­ance with the latest ver­sion of the CSS Animations Module, the name of the anim­a­tion can no longer be a space-separated string, so quot­ing the name will not work; this being the case, the examples used in the book will need to be updated, such as this one from page 173:

@keyframes expand {
from { border-width: 10px; }
50% { border-width: 1px; }
to {
    border-width: 1px;
    height: 120px;
    width: 150px;
    }
}

The WebKit imple­ment­a­tion will work per­fectly well without string quotes, so the online examples have been updated to exclude them.

— 13 June, 2011