This basic CSS animation introduction should help anyone interested in learning how to animate elements using CSS.

Before beginning it is worth noting the CSS animation syntax. The browser support for css animations should be considered as browser prefixes may be need.

The @keyframe rule is used to define the ‘animation-name‘ property, define the animation and apply css styles to the animation. To best explain here is an example of a basic fading out animation using a @keyframe rule.

See the Pen cssAnimationKeyframeRule by Daniel (@Parsons) on CodePen.

To see the css animation work a ‘div’ element with a class name of ‘element’ is added to the html. Referencing the class ‘element’ in the css with the @keyframe rules animation name of ‘fadeOut’ and an ‘animation-duration‘ property will make the animation work. The ‘font-size’ property with a large value is also added for effect.

See the Pen cssAnimationKeyframeRuleFadeOut by Daniel (@Parsons) on CodePen.

Hit RERUN to view the animation once more.

The ‘animation-duration‘ property sets the timeframe length of the animation. In this example the animation ‘fadeOut’ runs for ’13 seconds’ from start to end.
Lets add some more properties to the css animation.

The ‘animation-delay‘ property will delay the start of the animation. On line 13 a delay of ‘5 seconds’ is applied in this next example.

See the Pen cssAnimationKeyframefadeOutDelay by Daniel (@Parsons) on CodePen.

In this next example another property, the ‘animation-iteration-count‘ property is added. The delay has been removed and also the duration reduced to ‘5 seconds’.

See the Pen cssAnimationKeyframeIterationCount by Daniel (@Parsons) on CodePen.

The ‘animation-iteration’ property is set to ‘infinite’ which we cause it to play over and over until the end of time.

Finally in this last example a css ‘animation-timing-function‘ property is added with a value of ‘ease-out’. The ‘ease-out’ value will cause the animation to play slowly at the end.

See the Pen cssAnimationKeyframeEaseOut by Daniel (@Parsons) on CodePen.

Finally here is the same example as above however the shorthand syntax is used for the @keyframe rule. Also the ‘animation’ property can be used for shorthand.

See the Pen cssAnimationKeyframeShorthandTo by Daniel (@Parsons) on CodePen.

And it my seem pedantic however it is good practice to add vendor prefixes to enable css animations to function in all browsers.

See the Pen cssAnimationPrefixesAdded by Daniel (@Parsons) on CodePen.

More on CSS Animations and Transitions

CSS3 logo. Basic CSS Animation Introduction

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *