CSS for animation

Did you know that css animation is dead easy? You can create animations on webpages with a single line of CSS code! Sound too good to be true?

Imagine you have a div element on a page, and you have positioned it to the left-hand side of the page. All styling has been applied through CSS (note the ID selector used):

#myBlock {
background-color: red;
position: absolute;
left:0; }

<div id="myBlock">My content</div>

This will create a red block on the left hand side of the screen. Assuming you move the value for the left attribute (perhaps on a timer, or when a mouse click occurs), you may have a line of JavaScript such as the following:

document.getElementById("myBlock").style.setProperty("left", "800px");

This will move the block (instantly) to a position 800 pixels away from the left-hand edge of the screen. Not exactly animation…

But wait! Simply add this line to the CSS for myBlock (change highlighted) – and watch as now, the item is animated and gracefully moves to its new location. This works for element positions, effects, scale, colours and so much more. Have fun!

#myBlock {
background-color: red; 
position: absolute; 
left:0; 
animation-duration:0.5s;
}

If you’re after more information, have a look over at w3schools for a complete reference.