facebook

Learn how to do animations with CSS

By Sujata Biswas

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 Author
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.

Posts created 4

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
shares