CSS Animation

The CSS Animation property is utilized to generate animations on a webpage. It serves as an alternative to animations produced using Flash and JavaScript.

CSS3 @keyframes Rule

The animation is generated within the @keyframe directive. This directive is employed to manage the intermediary stages within a CSS animation sequence.

What animation does

An animation facilitates the gradual transition of an element from one style to another. It allows for the addition of multiple properties and specifies the changes in percentage. The animation begins at 0% and completes at 100%.

How CSS animation works

When crafting an animation within the @keyframes declaration, it is imperative to associate it with a selector; otherwise, the animation will not be applied.

The animation can be associated with the selector by defining a minimum of these two attributes:

✅ The title of the animation
✅ The length 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 explore a basic CSS animation instance that alters the background color of a rectangle from red to black.

Example


<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 100px;

    background: red;

    -webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */

    animation: myfirst 5s;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {

    from {background: red;}

    to {background: green;}

}

/* Standard syntax */

@keyframes myfirst {

    from {background: red;}

    to {background: green;}

}

</style>

</head>

<body>

<p><b>Note:</b> The IE 9 and earlier versions don't support CSS3 animation property. </p>

<div></div>

</body>

</html>

CSS animation example: Moving Rectangle

Let's consider another instance to showcase animation using a percentage value.