CSS Animation

CSS animations allows the HTML element to transition from one style to animation.

CSS style properties are needed for the animation, and a set of keyframes that indicate the start and end of the animation. The keyframes will contain CSS code that contains the different style changes.

Keyframes are used to indicate particular points of the time line to trigger the specific change in the time line.

Below is the code used for animating this square.

CSS CODE

<style>

div.element-animation{
background-color:red;
width:200px;
height:200px;
transform: translate(50%, 0);
-webkit-transform: translate(50%, 0);
-moz-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
}

.element-animation{
animation: animationFrames linear 4s;
animation-iteration-count: 2;

-webkit-animation: animationFrames linear 4s;
-webkit-animation-iteration-count: 2;

-moz-animation: animationFrames linear 4s;
-moz-animation-iteration-count: 2;

-o-animation: animationFrames linear 4s;
-o-animation-iteration-count: 2;

-ms-animation: animationFrames linear 4s;
-ms-animation-iteration-count: 2;

}

@keyframes animationFrames{
0% {
transform:  translate(50%, 0px)  rotate(0deg) ;
}
50% {
transform:  translate(200%,0px)  rotate(180deg) ;
}
100% {
transform:  translate(50%, 0px)  rotate(0deg) ;
}
}

@-moz-keyframes animationFrames{
0% {
-moz-transform:  translate(50%, 0px)  rotate(0deg) ;
}
50% {
-moz-transform:  translate(200%,0px)  rotate(180deg) ;
}
100% {
-moz-transform:  translate(50%, 0px)  rotate(0deg) ;
}
}

@-webkit-keyframes animationFrames {
0% {
-webkit-transform:  translate(50%, 0px)  rotate(0deg) ;
}
50% {
-webkit-transform:  translate(200%,0px)  rotate(180deg) ;
}
100% {
-webkit-transform:  translate(50%, 0px)  rotate(0deg) ;
}
}

@-ms-keyframes animationFrames {
0% {
-ms-transform:  translate(50%, 0px)  rotate(0deg) ;
}
50% {
-ms-transform:  translate(200%,0px)  rotate(180deg) ;
}
100% {
-ms-transform:  translate(50%, 0px)  rotate(0deg) ;
}
}

</style>


HTML Code


<div class="element-animation"></div>
<br><br>