Javatpoint Logo
Javatpoint Logo

CSS Animation

CSS Animation property is used to create animation on the webpage. It can be used as a replacement of animation created by Flash and JavaScript.

CSS3 @keyframes Rule

The animation is created in the @keyframe rule. It is used to control the intermediate steps in a CSS animation sequence.

What animation does

An animation makes an element change gradually from one style to another. You can add as many as properties you want to add. You can also specify the changes in percentage.0% specify the start of the animation and 100% specify its completion.

How CSS animation works

When the animation is created in the @keyframe rule, it must be bound with selector; otherwise the animation will have no effect.

The animation could be bound to the selector by specifying at least these two properties:

  • The name of the animation
  • The duration of the animation

CSS animation properties

Property Description
@keyframes It is used to specify the animation.
animation This is a shorthand property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property.
animation-delay It specifies when the animation will start.
animation-direction It specifies if or not the animation should play in reserve on alternate cycle.
animation-duration It specifies the time duration taken by the animation to complete one cycle.
animation-fill-mode it specifies the static style of the element. (when the animation is not playing)
animation-iteration-count It specifies the number of times the animation should be played.
animation-play-state It specifies if the animation is running or paused.
animation-name It specifies the name of @keyframes animation.
animation-timing-function It specifies the speed curve of the animation.

CSS animation example: changing background color

Let's see a simple CSS animation example that changes background color of rectangle from RED to BLACK.

Test it Now

CSS animation example: Moving Rectangle

Let's take another example to display animation with percentage value.

Test it Now
Next TopicCSS Gradient




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA