First dibs on CSS Animation

A simple CSS Animation





Flash maybe dead (or in fact dying) and “a-no-go” when considering web based animations on the iPhone and iPad but there is a new possibility – CSS Animation.

As you can see above, I have put together a simple animation consisting of a few images and some type. They all work together by using CSS to animate. That’s right, no Flash or Javascript. A sample of the code is shown below to fully illustrate the mechanics behind what you see.

First of all we have to define the structural elements, same as you would with any website. The code below controls the styling for the background element;

#animation {
background: #e8e8e8 url(.../brand-builders.png) repeat-x;
height: 600px;
width: 600px;
position: relative;
border-bottom: solid 13px #231F20;
overflow: hidden;
margin-bottom: 30px;
}

Next is the coding that controls how the animation works;

@-webkit-keyframes mountains {
from { background-position: 0 -60px; }
to { background-position: -533px -60px; }
}

Now we have defined the styling for this element and the animation process, we have to add in the animation code which is;

-webkit-animation: mountains 20s infinite linear;

And now we put it all together;

#animation {
background: #e8e8e8 url(.../brand-builders.png) repeat-x;
-webkit-animation: mountains 20s infinite linear;
height: 600px;
width: 600px;
position: relative;
border-bottom: solid 13px #231F20;
overflow: hidden;
margin-bottom: 30px;
}

This is only a sample of the code so if you are intrigued to know how this really works, by all means take a peak.

There are limitations using this form of animation as only webkit based browsers such as Safari or Google Chrome are suited. Unfortunately, Internet Explorer just doesn’t cut it. So if it isn’t working, fix it, use a modern browser.

Will CSS animations become the new Flash? Probably.

Should we all be jumping to use it right now? No.

Simply put, not all the modern browsers support webkit animations and that unfortunately means you would need a fall back plan, maybe Javascript or even Flash. Which defeats the idea of using a new modern technique.

Only time will tell.

Back to top

Contact us, we'd love to hear from you.

  • Business enquiry
  • General enquiry
  • Press
  • Careers
  • Support
Google Maps

Email this page to a friend.

× Engine Creative Squideo Player

Engine Creative Showreels

TV Commercials

Corporate

Animation

Documentaries

Digital Projects