CSS Animations

❮ Previous Home Next ❯

The CSS 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.

The following are the advantages to CSS animations:




The following are the animation related properties:




@keyframes

The @keyframes rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.

This gives more control over the intermediate steps of the animation sequence than transitions.

Syntax:

@keyframes animation-name {
    keyframes-selector {
         property: value;
    }
}

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-iteration-count: infinite;
  animation-name: demo;
  animation-duration: 2s;
}

@keyframes demo {
  from {left: 0%;}
  to {left: 50%;}
}



animation-name

The animation-name property is used to define the animations that should be run.

The @keyframe directive specified defines the properties to animate. The keyword none can be used to override a cascade.

Syntax:

animation-name: keyframename|none;

Example

div {
  animation-name: myDiv;
}



animation-duration

The animation-duration property is used to define the time it takes one iteration of an animation to play.

Syntax:

animation-duration: time;

time - The time that an animation takes to complete one cycle. This may be specified in either seconds (s) or milliseconds (ms). The value must be positive or zero and the unit is required. A value of 0s, which is the default value, indicates that no animation should occur.



Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-iteration-count: infinite;
  animation-name: demo;
  animation-duration: 2s;
}

@keyframes demo {
  from {left: 0%;}
  to {left: 50%;}
}



animation-delay

This property is used to define a delay before an animation starts.

The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.

The animation can start later, immediately from its beginning, or immediately and partway through the animation.

Syntax:

animation-delay: time;

time -The default value is 0s. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start.

Example

div {
  animation-delay: 2s;
}



animation-iteration-count

The animation-iteration-count property is used to define the number of times an animation should play.

Syntax:

animation-iteration-count: number|infinite;

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-iteration-count: infinite;
  animation-name: demo;
  animation-duration: 2s;
}

@keyframes demo {
  from {left: 0%;}
  to {left: 50%;}
}






animation-direction

The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

Syntax:

animation-direction: normal|reverse|alternate|alternate-reverse;


Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-iteration-count: infinite;
  animation-name: demo;
  animation-duration: 2s;
  animation-direction: alternate;
}

@keyframes demo {
  from {left: 0%;}
  to {left: 50%;}
}



animation-timing-function

The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.

Syntax:

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n);


Example

div {
  animation-timing-function: ease-in;
}



animation-fill-mode

The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.

Syntax:

animation-fill-mode: none|forwards|backwards|both;

Example

div {
  animation-fill-mode: forwards;
}



animation

The animation shorthand CSS property applies an animation between styles.

Syntax:

animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ];

The following example uses six animation properties:

Example

div {
  animation-name: demo;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

The following example apply same animation by using the shorthand animation property:

Example

div {
  animation: demo 5s ease-in-out 2s infinite alternate;
}



All CSS Animation Properties

Property Description
@keyframes Specifies the animation code.
animation A shorthand property for all the animation-* properties.
animation-delay Define a delay before an animation starts.
animation-direction Sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
animation-duration Define the time it takes one iteration of an animation to play.
animation-fill-mode Sets how a CSS animation applies styles to its target before and after its execution.
animation-iteration-count Define the number of times an animation should play.
animation-name Define the animations that should be run.
animation-play-state Sets whether an animation is running or paused.
animation-timing-function Sets how an animation progresses through the duration of each cycle.
❮ Previous Home Next ❯