Learn how to do animations with CSS

In this blog, I am going to discuss the CSS animation in details. It makes possible to animate transitions from one CSS style configuration to another. CSS allows animation of HTML elements without using JavaScript or Flash. If we give a dynamic look on our web page without jquery then we have to know some animation properties, with this property we can create an animated style.

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state
9. @keyframe

Each animation needs to be defined with the @keyframes, which control the intermediate animation steps in CSS3.

You can follow these methods to create an animation style……..

HTML

<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS

body{
padding: 20px;
margin:0;
}

.box{
width: 150px;
height: 150px;
float:left;
background: red;
border-radius: 50%;
position: relative;
animation-name: box;
animation-duration: 5s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}

@keyframes box{
0%{top: 0;left: 0;background: red;}
25%{top: 0;left: 250px;background:  yellow;}
50%{top: 250px;left: 250px;background: green;}
75%{top: 250px;left: 0;background: blue;}
100%{top: 0;left: 0;background: red;}
}

@-webkit-keyframes box{
0%{top: 0;left: 0;background: red;}
25%{top: 0;left: 250px;background: yellow;}
50%{top: 250px;left: 250px;background: green;}
75%{top: 250px;left: 0;background: blue;}
100%{top: 0;left: 0;background: red;}
}

@-moz-keyframes box{
0%{top: 0;left: 0;background: red;}
25%{top: 0;left: 250px;background: yellow;}
50%{top: 250px;left: 250px;background: green;}
75%{top: 250px;left: 0;background: blue;}
100%{top: 0;left: 0;background: red;}
}

Sujata Biswas Subscriber

Web Designer and Technology Enthusiast , Openweb Solutions

I am Sujata Biswas working as a Front-end developer at Openweb Solutions. But, I also like to study and learn about new technologies and write about them.

web

http://openwebsolutions.in

sujata_biswas@openwebsolutions.in

Learn how to do animations with CSS

Sujata Biswas

Related Posts