AtoZ CSS Screencast: Keyframe Animations

Animation used to be the realm of JavaScript.

Now, in modern browsers, we can animate elements using CSS.

The @keyframes block and animation properties allow us to specify what gets animated and when.

In this episode we’ll look at the kind of animations that are suited to CSS, the concept of specifying a series of @keyframes and finally the way these keyframes are combined with animation settings to bring the page to life.

Animations in CSS

As CSS animations don’t have the deepest of browser support, they are best suited to visual flair rather than being a key part of the page content or design.

Animations can run 1 or more times or loop infinitely. It’s also possible to add multiple animations to the same element. A great example of multiple looping animations can be seen on the AtoZ CSS homepage.

Animations can be triggered in CSS as soon as the page loads, after a delay or via some kind of state based change like :hover, :focus, or :active which we looked at in "Episode 8: Hover".

CSS animations can also be started and stopped in Javascript by toggling the animation-play-state property. We’ll look at the other animation properties and syntax a bit later on.

Keyframes

In order to animate an element (or selection of elements), we need to specify a series of keyframes.

Continue reading %AtoZ CSS Screencast: Keyframe Animations%

by Guy Routledge via SitePoint