CSS3 – Animating the DOM – Part 1

So recently my focus has moved visibly from native mobile development to web based development, this is mainly due to the constrain of work. As I try to keep my blog up to date it only makes sense that I transition the blog to this area too. No doubt I will be back to mobile soon but for now it’s web stuff and today its CSS3.

So recently I wanted to animate some elements of my web application to add a little more interaction to the application. Traditionally animation has been saved for flash websites and flex RIAs. As HTML5 gains steam so will the users expectations of web experiences so we must adapt to create intelligent and engaging applications and using animations can really give an application the feeling that its a living thing and not just a static page.

CSS 3 Basics

We will start with the basics as always and hopefully build up to some more advance techniques in future posts, However you may find that these basic effects can achieve exactly what you need.

Transitions

If you aren’t familiar with transitions then this brief introduction may help. Transitions basically define the start and end of your animation i.e Moving an object from A -> B should take x amount of seconds. You need transitions to make the movement that appears on screen appear seamless and smooth otherwise you will get a stickato movement that looks horrible.

transition: all 1s ease-in-out;

The above CSS follows this format

You can declare each of the above transition properties in its own CSS rule:

transition-property: background-color,width,height;
transition-duration: 2s, 1s, 0.5s;
transition-delay: 0s, 0.5s, 1s;

So this will animate background-color for a duration of 2 seconds and delay of 0s, width for a duration of 1 seconds with a delay of 0.5.

Using the above method you can achieve effects like this

Css3 Transition Opacity on Hover

Css3 Transition Opacity on Hover

You can transition many properties on elements such as color/background/height/ width and so much more you can also combine these to make nice effects too. The above shows how you can use transitions to fade out an image using the Opacity css property.

.div {
background:url(http://imgurl.com);
transition:all 3s ease;
}

.div:hover {
opacity:0;
}

Have a play around with transitions for now and see what effects you can create with using these basic transitions alone, In the next post we will look at more advance transitions and start to take a look at adding transformations on top too.