How to Understand CSS3 Animations in Easy Ways?

CSS3 animations allows animation of most HTML elements without using JavaScript, Adobe Flash or any other software. CSS3 animation looks a little hard at first, but once you understand the basics, you will find it amazing and interesting.

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Css3 animation is made of two component, a style describing the CSS animation and a set of @keyframes that indicate the starting and ending of the animation.

Understand the @keyframes

Simply, The @keyframes CSS at-rule lets you control the intermediate steps in a CSS animation sequence by establishing keyframes ( waypoints) along the animation sequence that must be reached by certain points during the animation.

Example:

@keyframes technig{
  0%{
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}

Here is a live example.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”Jksua” default_tab=”result” user=”see8ch”]See the Pen <a href=’http://codepen.io/see8ch/pen/Jksua/’>Generate @keyframes from Sass map and @mixin</a> by Chris Holder (<a href=’http://codepen.io/see8ch’>@see8ch</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

If you look at the above example, you will see that we have an name for our keyframe (technig). And inside that keyframe, we have 0% which define the starting point of animation. It means in 0% the background color should be yellow and till 100%, it should change to red. You can add others waypoints as well. it was just a simple example. You can learn more about keyframes here.

How CSS3 Animations Works?

An animation lets an element gradually change from one style to another. So you can use @keyframes to apply those changes on your elements. Here are all properties that you can use in you css3 animations.

Property Name  Property Values
 animation-timing-function  ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
 animation-play-state  animation-play-state
 animation-delay  xs or xms (replace the x with any number)
 animation-iteration-count  x (any number)
 animation-duration  xs or xms (replace the x with any number)
 animation-fill-mode  forwards, backwards, both, none
 forwards, backwards, both, none  normal, alternate

You can learn more about css3 animations w3schools.

How to use Css3 Animations?

Once you create a @keyframe and give it a name, now you can use that name the animation-name property. You can add the animation duration and other properties as well.

Example :

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”Jksua” default_tab=”result” user=”see8ch”]See the Pen <a href=’http://codepen.io/see8ch/pen/Jksua/’>Generate @keyframes from Sass map and @mixin</a> by Chris Holder (<a href=’http://codepen.io/see8ch’>@see8ch</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Press compile to see the compiled version. If you look at the example, we have created a @keyframes first, than we applied that @keyframes to body tag.

Conclusion

You can do many more stuff with with css3 animations feature. I hope it has been informative for you and if you have any question or confusion about this tutorial, feel free to ask it on comments and I will answer you about CSS3 Solutions.

 

CSS3CSS3 AnimationsHow to
Comments (4)
Add Comment
  • Geek

    Great Css3 technologies are amazing specially when it comes to animations, it has tens of amazing functionality that allow as to design our projects to look more and more beautiful and amazing

    at one word the article was perfect, waiting for more articles about the web technologies

  • Hujjat Nazari

    Thank yuu Dear Geek. We will write more about it in future articles.

  • IsmailFarhang

    that was an extraordinary article about css3 animations that help us to improve our skills with such article which will have been an instructive ones. so I hope you write the topic more its. that was very suitableness ones.