CSS Animations is a proposed module for Cascading Style Sheets (CSS). CSS Animations make it possible to animate XLM elements using CSS. XLM (Extensible Markup Language) is a set of rules for encoding documents in machine-readable form. XLM focuses chiefly on documents, but it is also commonly used for the representation of arbitrary data structures. There are today hundreds of languages based on XML, such as RSS, Atom and XHTML. Famous programs such as Microsoft Office, OpenOffice and Apple’s iWork all use XML-based formats.
History of CSS Animations
For many years, the pseudo-class
:hover was used to generate rudimentary animations, but other than that CSS was normally not used for animations until the late 2000s. In 2007, WebKit announced their plans to include CSS animations in WebKit, and they then went on to implement both implicit and explicit animations through CSS.
Apple derived WebKit from the KHTML software library of KDE’s browser Konqueror, and started using it in Safari. Since then, WebKit has been developed further by the KDE project, Apple, Google, Nokia, Samsung, Bitsream, Torch Mobile, and others.
Browser support for CSS Animations
Support for CSS Animations is currently (2011) available in…
…WebKit (nightly builds)
…Safari 4 and 5
…Safari for iPhone
…Android 2.x and 3.x
…iTunes9 (it is used to support iTunes LP files)
The future of CSS Animations
CSS animation has been suggested as a feature for CSS3.
Creating a CSS animation sequence
When creating a CSS animation sequence, you style the element you wish to animate with the animation property or its sub-properties. You get to control the timing and duration of your animation, as well as other details regarding the progression of the sequence. Please note that the actual appearance of the animation is configured using the @keyframes at-rule.
Sub-properties of the animation property
Configures the delay between the time the element is loaded and the start of the sequence.
Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
Configures how long an animation should take to complete one cycle.
Configures how many times the animation should repeat. Specifying infinite will make the it repeat indefinitely.
Specifies the name of the @keyframes at-rule describing the animation’s keyframes.
Allows you to pause and resume the animation sequence.
Configures how the animation transitions through keyframes.
Configures which values that are applied by the animation before and after its execution.