CSS: Animation Basics

This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change. See more: CSS Video Courses and Tutorials from lynda.com.

Topics include:

  • Understanding delay and fill-mode
  • Dictating an animation’s direction
  • Using easing
  • Adding keyframes
  • Looping an animation
  • Chaining multiple animations on one element
  • Setting up the HTML structure
  • Adding interactivity with JavaScript

CSS Animations

CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules.

If at one point in time there are multiple animations specifying behavior for the same property, the animation whose name occurs last in the value of ‘animation-name’ will override the other animations at that point.

An animation does not affect the computed value before the application of the animation, before the animation delay has expired, and after the end of the animation.

Computation of animated property values

The diagram above shows how property values are computed. The intrinsic style is shown at the top of the diagram. The computed value is derived from intrinsic style at the times when an animation is not running and also when an animation is delayed (see below for specification of animation delay). During an animation, the computed style is derived from the animated value.

An animation applies to an element if the element has a value for ‘animation-name’ that references a valid keyframes rule. Once an animation has started it continues until it ends or the ‘animation-name’ is removed. The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect. Note also that changing the value of ‘animation-name’ does not necessarily restart an animation (e.g., if a list of animations are applied and one is removed from the list, only that animation will stop; The other animations will continue). In order to restart an animation, it must be removed then reapplied.

The end of the animation is defined by the combination of the ‘animation-duration’, ‘animation-iteration-count’ and ‘animation-fill-mode’ properties.

Some Examples of CSS Transitions and Animations

I have seen some remarkable work done purely with CSS, no additional graphics. Developers and designers are doing some amazing things with CSS. CSS is a powerful language. Below, I have compiled some of the most intriguing and inspirational projects using only CSS. They are all really good but the first one is truly my favorite!

The Simpsons in Pure CSS by Chris Pattle

See the Pen The Simpsons In Pure CSS by Gowiphi (@Gowiphi) on CodePen.

CSS Animated Gallery With Persistent Images By Dudley Storey

See the Pen CSS Animated Gallery With Persistent Images by Dudley Storey (@dudleystorey) on CodePen.

3D Solar System by Julian Garnier

See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.

CSS Animate By Kevin Bourke (changing animation and colour using keyframes)

See the Pen CSS Animations by Kevin Bourke (@bourkekev) on CodePen.

See more resources:

The guide to CSS animations for the web

CSS 3D Folding Animation

CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More

Build My Site

Originally published at buildmy-site.com on December 25, 2014.

Show your support

Clapping shows how much you appreciated Darlene Tate’s story.