Browser Support for CSS Animations

Google Chrome

4.0

Apple Safari

4.0

Mozilla Firefox

5.0

Microsoft Internet Explorer

10.0

Opera

12.0

How to use CSS3 animation

The CSS animation feature was introduced into Webkit in 2007. In 2009 a working draft was written and added to the w3c site. Over the next three years support was gained by Firefox, Internet Explorer and finally Opera.

To use CSS animation, you first specify some keyframes for the animation - basically what styles will the element have at certain times. The browser does the tweening for you.

Demo

Hover over me

Code

The interesting bit of this code is this bit of CSS (remember to add vendor prefixes both for the keyframes code and the animation-* properties):

@keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}

#box {
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 4;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

Note that the 4 iterations makes the box pulse twice - the animation runs forwards then backwards, then forwards then backwards.

You can have as many keyframes as you like, at whatever intervals you like.

A useful setting is to set animation-iteration-count to infinite, making the animation continue for ever.

Demo

The key to using these animations is subtlety - nice delicate animations, rather than extreme over the top ones! It's also worth noting that the WCAG (Web Content Accessibility Guidelines) 2.0 specifies that a website shouldn't contain things that flash more than 3 times a second to avoid causing seizures in people susceptible to them.

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

avenue-origin