CSS Animation

This property allow us to specify the changes in CSS properties over time as a set of keyframes, like flash animations.

The first step of building a CSS animation is to defining individual keyframes and naming an animation with a keyframes declaration.

The second step is referencing the keyframes by name using the animation-name property as well as adding animation-duration and other optional animation properties to control the animation’s behavior.

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


Animation properties

Following table provides a brief overview of all the animation-related properties:-

PropertyDescription
animationA shorthand property for setting all the animation properties in single declaration.
animation-nameSpecifies the name of @keyframes defined animations that should be applied to the selected element.
animation-durationSpecifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
animation-timing-functionSpecifies how the animation will progress over the duration of each cycle i.e. the easing functions.
animation-delaySpecifies when the animation will start.
animation-iteration-countSpecifies the number of times an animation cycle should be played before stopping.
animation-directionSpecifies whether or not the animation should play in reverse on alternate cycles.
animation-fill-modeSpecifies how a CSS animation should apply styles to its target before and after it is executing.
animation-play-stateSpecifies whether the animation is running or paused.
@keyframesSpecifies the values for the animating properties at various points during the animation

Defining keyframes

Keyframes are used to specify the values for the animating properties at various stages of the animation. These are specified using a specialized CSS at-rule — @keyframes.

The keyframe selector for a keyframe style rule starts with a percentage (%) or the keywords from (same as 0%) or to (same as 100%). The selector is used to specify where a keyframe is constructed along the duration of the animation.

Input:-

Index.html
	
<body>   
    <div class=”box”></div>
</body>
Style.css
.box {
    width: 50px;
    height: 50px;
    margin: 100px;
    background: red;
    position: relative;
    left: 0;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: shakeit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: shakeit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}
 
/* Standard syntax */
@keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}

Output:-


Animation shorthand property

There are many properties to consider when creating the animations. However, it is also possible to specify all the animations properties in one single property to shorten the code.

Input:-

Index.html
	
<body>   
    <div class=”box”></div>
</body>
Style.css
.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 2s linear 0s infinite alternate;
    /* Standard syntax */
    animation: repeatit 2s linear 0s infinite alternate;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}

Output:-