CSS transitions, CSS transforms and CSS animation

Browser Support for CSS transitions How to use transitions If you haven't used transitions before, here's a brief introduction. On the element you want to have animate, add the following CSS: There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. Another approach is simply to write the CSS without the prefixes, then use Lea Verou's -prefix-free to add them in at runtime. Something you definitely shouldn't do is to only include the webkit prefix. It's worth noting as well that there isn't an -ms- prefix on these properties. The syntax is pretty straightforward, you specify the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function. Whenever any property changes, then it will animate instead of changing directly. To see the difference in speed, have a look at the speed test. Different timing functions Delays The syntax for a CSS3 transition is of the form:

Keyframe Animation Syntax Basic Declaration & Usage For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above Multiple steps If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values: Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate. Calling keyframe animation with separate properties Animation Shorthand Just space-separate all the individual values. animation: test 1s 2s 3 alternate backwards Combine transform and animation Multiple animations You can comma-separate the values to declare multiple animations on a selector. Steps() The steps() function controls exactly how many keyframes will render in the animation timeframe. If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time. The math works out nicely there. Browser Support More Resources

CSS Animations Abstract This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior. Status of this document This section describes the status of this document at the time of its publication. Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Some changes since the draft of April 2012: Added a reference to the accessibility guidelines around seizures caused by rapid visual changes. Table of contents 1. This section is not normative. This proposal introduces defined animations 2. 3. 4. The keyframe selector 5.

Controlling CSS Animations and Transitions with JavaScript The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial. Web designers sometimes believe that animating in CSS is more difficult than animating in JavaScript. While CSS animation does have some limitations, most of the time it's more capable than we give it credit for! Not to mention, typically more performant. Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries. Let's jump straight in! Quick Note: Animations and Transitions are Different In this article we will cover each of them separately. Manipulating CSS Matrixes