Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content


How To Make Animation In CSS3?

Animation in CSS3 is allowed without using JavaScript or Flash. When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. We can give duration, name, delay and iteration count to animation. Iteration means how many time you want to repeat the effect.

Let’s see an example of Animation :
.img_hover{position:absolute; top: -100%, left:0px; width:100%; height:100%; display: block; color: white; transition: all .8s ease-in-out; animation-name: test; animation-duration: yellow; background: red;}
.image_main: hover .img_hover{top:0px; transition: all .8s eas-in-out;}
.img_hover a {top:50%; left: 50%: position: absolute; transform: skew(10deg); display: block;}
.image_main: hover img {transform: scale(1:1); transform: all .3s ease-in-out;}
@keyframes test{
from { background-color: red;}
to{ background-color: yellow;}

Now, to see continue change in background color, we will give animation iteration in img hover command by adding animation-iteration-count: 10. You will see in browser that colors are changing from red to yellow. For continuous change in color, give infinite iteration count.

This way, using transition, transform and animation in CSS3; you can make HTML more effective.


Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere