Animation

In this tutorial, I will be showing you all you need to know about using CSS animations in your website pages.

DEFINITION:

Animation is the process of gradually changing an element from one style to another.

How To Create CSS Animation

@keyframes - This is used to set the various stages at which styles gradually change from one to another.

First specify the name after the @keyframe. (For example: @keyframe example1)
Secondly specify write the CSS styles for each stage. Here it takes properties from 0% - 100% or from - to

Referencing the @keyframes' name to the animation-name and setting the other animation properties (animation-duration, animation-delay, etc).

TRY IT OUT YOURSELF

Animation Properties

animation-name - used to point the @keyframes name that is defined for the animation that should be applied to the element.

TRY IT OUT YOURSELF

NOTE:

The animation-duration is compulsory and must be set, else it will not start.

TIP:

If the style for the element's animation is not set. The last style of the @keyframes declaration will be used as the default style of the element when the animation ends.

animation-duration - used to specify the amount of time (in seconds or milliseconds) the animation should use to complete its cycle.

TRY IT OUT YOURSELF

animation-timing-function - used to specify how the intermediate values in-between the start and end of the animation defined in the @keyframes should be calculated. It specifies the speed curve of the animation.

ease - starts slowly, then fast and ends slowly.
ease-in - starts slowly and ends.
ease-out - starts and ends slowly.
ease-in-out - combines both ease-in and ease-out characteristics.
linear - starts and ends with the same speed.
cubic-bezier(n, n, n, n) - animation which allows you define your own values for the speed.

TRY IT OUT YOURSELF

animation-delay - this is the amount of time (in seconds or milliseconds) it takes before the animation will start.

TRY IT OUT YOURSELF

animation-iteration-count - this is the number of times the animation will repeat. It takes positive integers (1, 2, 3, ..) or keyword (infinite).

TRY IT OUT YOURSELF

animation-direction - this is used to specify the direction of the animation.

normal - plays forwards.
reverse - plays backwards.
alternate - plays forwards first, then backwards.
alternate-reverse - plays backwards first, then forwards.

TRY IT OUT YOURSELF

animation-fill-mode - this is used to define the style for the animation element when it is not playing.

none - no style before and after animation.
forwards - when animation ends, set the style to the last style in the @keyframes declaration.
backwards - when animation ends, set the style to the first style in the @keyframes declaration.
both - combine both forwards and backwards characteristics.

TRY IT OUT YOURSELF

animation-play-state - this is used to specify whether animation should be played or paused.

TRY IT OUT YOURSELF

animation-composition - this is used to specify the composite operation to be applied when many animations are having simultaneous effects on the same property.

NOTE:

Not all CSS properties can be animated.
Only CSS properties that has numbers, lengths, percentage and inches can be used for animation.
animation-duration is NOT optional, it must be specified.

animation - shorthand property that use to for setting all animation properties. The syntax is as follows: animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

TRY IT OUT YOURSELF

BASIC

INTERMEDIATE

ADVANCE

Animation

How To Create CSS Animation

Animation Properties

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT