Posts Tagged ‘keyframe’


How to use CSS3  animations

CSS animations were introduced into Webkit in 2007, and added to Firefox by David Barron in 2011.

In 2009 a working draft was written and added to the w3c site.

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.

Code

The interesting bit of this code is this bit of CSS (remember to add vendor prefixes):

@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.