Css animation

css animation

The animation is a method by which images looks in running or moving state. In the web, development animation creates interactive webpages. But before CSS animation, it’s done by flash. That looks cool but it’s very heavy or take more bandwidth or consume data. After html5 we have a lot of lightweight options like canvas, SVG, and CSS animation.

But before going further we should know the concept of a keyframe. Basically, a keyframe is those point which ley between starting and ending of a smooth transition.


<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: changecolor 5s infinite;
}
@keyframes changecolor {
  0% { background-color: red; }
  100% { background-color: blue; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>

In this example animation property play a fantastic role. It has a keyframe name, duration, iteration count. @keyframes trigger keyframe and you will see smooth transition 0 to 100.

You May Also Like

About the Author: Pankaj Bisht