Understanding the CSS3 Keyframe Animations?

Nowadays CSS animation is not a new concept. CSS animation allows you to animate most of the HTML element without using JavaScript or Flash! (Which is going to almost dead). So, what is CSS3 Animation? Let’s break the ice.

All the modern browser support CSS animation. By using @keyframes block and animation properties we can specify what to do in animation.

Now I will try to take a deep look at animation. An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want.

To use CSS3 animation, you must first specify some keyframes for the animation. @keyframes hold what styles the element will have at certain times.

The @keyframes Declaration Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element.

The following example binds the bg-animation animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from red to yellow:

See the Pen <div&rt; Element Show Hide CSS Animation by Pavel (@bdpavel) on CodePen.light

Note if  animation-duration property is not specified, the animation will have no effect, because the default value is 0.

In the example above we have specified when the style will change by using the keywords from and to (which represents 0% (start) and 100% (complete).

It is also possible to use percent. By using percent, you can add as many style changes as you like.

The following example will hide and show of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

See the Pen The CSS keyframes Declaration Rule by Pavel (@bdpavel) on CodePen.light

The following example will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

See the Pen Change both the background-color and the position for a div element- CSS Animation by Pavel (@bdpavel) on CodePen.light

Animation Name

The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.

A value of none which is the default value of animation-name.
Syntax: animation-name: bg-animation;

Animation Duration

The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.

A value of 0s, which is the default value, indicates that no animation should occur.

Syntax

Animation Delay

The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin sometime after it’s applied to an element.

A value of 0s, which is the default value of the property, indicates that the animation should begin as soon as it’s applied. Otherwise, the value specifies an offset from the moment the animation is applied to the element; animation will begin that amount of time after being applied.

Syntax

See the Pen bg animation by cssanimation (@cssanimation) on CodePen.dark

Animation Play State

The animation-play-state CSS property determines whether an animation is running or paused. This can be queried to determine whether or not the animation is currently running. In addition, its value can be set to pause and resume playback of an animation.

Initial value none
Applies to all elements, ::before and ::after pseudo-elements

Syntax

See the Pen bg animation by cssanimation (@cssanimation) on CodePen.dark

Animation Fill Mode

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

Initial value running
Applies to all elements, ::before and ::after pseudo-elements
Inherited no
Animation type discrete

Syntax

  • animation-fill-mode: none The animation will not apply any styles to the target when it’s not executing; it will instead be displayed using its state based on all other CSS rules applied to it.
  • animation-fill-mode: forwards After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended
  • animation-fill-mode: backwards The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is “normal” or “alternate”) or those of the to keyframe (when animation-direction is “reverse” or “alternate-reverse”)
  • animation-fill-mode: both The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions

See the Pen bg animation by cssanimation (@cssanimation) on CodePen.dark

Animation Iteration Count

The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:

Initial value 1
Applies to all elements, ::before and ::after pseudo-elements
Inherited no
Animation type discrete

Syntax

See the Pen bg animation by cssanimation (@cssanimation) on CodePen.dark

The following example uses the value infinite to make the animation continue forever:

See the Pen bg animation by cssanimation (@cssanimation) on CodePen.dark

Animation Direction

The animation-direction property is used to let an animation run in reverse direction or alternate cycles.

Initial value normal
Applies to all elements, ::before and ::after pseudo-elements
Inherited no
Animation type discrete

Syntax

The following example will run the animation in reverse direction:

See the Pen bg animation by cssanimation (@cssanimation) on CodePen.dark

The following example uses the value “alternate” to make the animation first run forward, then backward, then forward:

See the Pen bg animation by cssanimation (@cssanimation) on CodePen.dark

Define the Speed Curve of the Animation

The animation-timing-function property specifies the speed curve of the animation. animation-timing-function It specifies the speed curve of the animation. The animation-timing-function property can have the following values:

Initial value ease
Applies to all elements, ::before and ::after pseudo-elements
Inherited no
Animation type discrete

Syntax

  • ease – specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear – specifies an animation with the same speed from start to end
  • ease-in – specifies an animation with a slow start
  • ease-out – specifies an animation with a slow end
  • ease-in-out – specifies an animation with a slow start and end
  • cubic-bezier(n,n,n,n) – lets you define your own values in a cubic-bezier function

The following example shows the some of the different speed curves that can be used:

Animation Shorthand Property

Here, I want to show you an example that uses six animation properties:

we can achieve the same animation by using this shorthand animation property:

animation: name | duration | delay | iteration-count | direction | play-state | timing fill-mode

Finally in one word if we look at CSS3 Animation Properties at a glance

we can see following lists the @keyframes rule and all the animation properties:

  • @keyframes: It specifies the animation code
  • animation: It is a shorthand property for setting all animation properties
  • animation-delay: It specifies a delay to start an animation
  • animation-direction: It specifies whether an animation should play in reverse direction or alternate cycles
  • animation-duration: It specifies how many seconds or milliseconds an animation take to complete one cycle.
  • animation-fill-mode: It specifies the style for the element when the animation is not playing
  • animation-iteration-count: It specifies the number of time animation should be played
  • animation-name: It specifies the name of the @keyframe animation
  • animation-play-state: It specifies animation is running or paused

Following lists the Initial value for all the animation properties:

  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running

Browser support

Few things we should keep in mind that CSS animations are not supported in IE9 or below or Opera Mini. If we use IE10, IE11 and Firefox, the @keyframes and animation properties are unprefixed but -webkit prefixes are urgent for others.