An animation is a visualization of something changing over a period of time.

In CSS, that "something" is CSS Properties.
CSS Animations allows us to do cool stuff like this...

(Hover to Scare Sheep)

Advantages of CSS Animations

  • They're easy to use for simple animations; you can create them without even having to know JavaScript
  • The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they're well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible
  • Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible

There are Two Ways to Animate in CSS

CSS Transitions

  • Provide a way to control animation speed when changing CSS properties
  • Slows down the sudden change in properties on hover
  • Allow you to specify the time interval and what kind of easing will take place

(Hover over me!)

CSS Animations

  • Animates CSS properties on the elements they affect without any explicit triggering
  • Once you define an animation, it can start playing automatically
  • Allows you to make animation loops

Both ways of animating lets us do all sorts of cool things like making things move, having things fade in and out, seeing things change color, etc. They differ when it comes to how you trigger them to play, whether they loop easily, how complicated of a transition you can define, and how formal you must be in using them.

CSS Transitions

CSS Transitions are controlled using the shorthand transition property. This is the best way to configure transitions, as it makes it easier to avoid that the lengths of the parameter list are out of sync, which can be very frustrating to have to spend lots of time debugging the CSS.

To make a CSS transition, choose an element and write it twice in your CSS. One of the elements needs a :hover after it. Select a specific property value of the element and give that property in the two elements you just wrote a different values. In the non :hover element, add the transition: property with your personalized components.

You can control the individual components of the transition with these Sub Properties:

ex

transition-property:

Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.

transition-duration:

Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.

transition-timing-function:

Specifies a function to define how intermediate values for properties are computed. Timing functions determine how intermediate values of the transition are calculated. Most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. You can also choose easing from specfic easing functions Cheat Sheet.

transition-delay:

Defines how long to wait between the time a property is changed and the transition actually begins.

CSS Keyframe Animations

CSS keyframe animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

Configuring the Animation - Part 1

To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule explained further down the page.

These are animation's sub properties:

animation-name:

Declares the name of the @keyframes at-rule to manipulate

animation-duration:

The length of time it takes for an animation to complete one cycle

Sub Properties- XS or Xms

animation-timing-function:

Establishes preset acceleration curves such as ease or linear

Sub Properties- ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))

animation-delay:

The time between the element being loaded and the start of the animation sequence

Sub Properties- XS or Xms

animation-direction:

Sets the direction of the animation after the cycle. Its default resets on each cycle

Sub Properties- normal, alternate

animation-iteration-count:

The number of times the animation should be performed

Sub Properties- (number)

animation-fill-mode:

Sets which values are applied before/after the animation. For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.

Sub Properties- forwards, backwards, both, none

animation-play-state:

Pause/Play the animation

Sub Properties- paused, running

Configuring the Animation - Part 2

Once you have named your animation and set your animation properties on the element you are animating, it is time to set up the keyframes. In a new line of CSS, write@keyframes (animation-name) to target the animation you just configured. The CSS will look something like this...

example

Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. To add more keyframes enter a new percent between 1-99 and the enter the property value you want. For example to make pacman turn red too, add a 33% {background-color: red} and reconfigure your percent values like this...

example

You can also comma-separate the values to declare multiple animations on a selector as well. In the example below, we want to change the color of pacman in a @keyframe whilst also animating his eating motion.

example example