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.
CSS Animations has been opposed by those who regard animation through JavaScript or SMIL superior. There are also those who see the promotion of CSS Animations as a way for Apple (who is the main sponsor of WebKit) to prevent the inclusion of Adobe Flash in Safari, the browser used in Apple’s iPhone OS line of mobile devices.
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.
WebKit is layout engine that makes it possible for web browsers to render web pages. WebKit is used by Google Chrome, Safari and the experimental browser included with the Amazon Kindle e-book reader. WebKit’s WebCore and JavaScriptCore components are available under the GNU Lesser General Public License. The rest of WebKit is available under a BSD-style license.
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…
…Firefox 5
…WebKit (nightly builds)
…Google Chrome
…Safari 4 and 5
…Safari for iPhone
…Android 2.x and 3.x
…RIM OS6
…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
- animation-delay
Configures the delay between the time the element is loaded and the start of the sequence.
- animation-direction
Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
- animation-duration
Configures how long an animation should take to complete one cycle.
- animation-iteration-count
Configures how many times the animation should repeat. Specifying infinite will make the it repeat indefinitely.
- animation-name
Specifies the name of the @keyframes at-rule describing the animation’s keyframes.
- animation-play-state
Allows you to pause and resume the animation sequence.
- animation-timing-function
Configures how the animation transitions through keyframes.
- animation-fill-mode
Configures which values that are applied by the animation before and after its execution.