CSS Animation ( Understand Basic Concepts )

In this post we are going to discuss CSS animations. What are the basic concept to make animation by using CSS.

First thing is which browser supports CSS Animations. So here is the list :-

Chrome :- From Version 43.0 ( All kind of CSS Animation Properties are supported )

Internet Explorer / Edge :- From Version 10.0 ( All kind of CSS Animation Properties are supported )

FireFox :- From Version 16.0 ( All kind of CSS Animation Properties are supported )

Safari :- From Version 9.0 ( All kind of CSS Animation Properties are supported )

Opera :- From Version 30.0 ( All kind of CSS Animation Properties are supported )

 

With a basic color changing Box we are going to understand how properties of animation works in CSS Animations.

These are the properties used to make CSS Animations :-

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

Lets discuss each propety now and their work.

@keyframes :- This is to use to inform page from where to where animation will work. That is why we have to mention from and to in this property. Lets see an example css code.

.anim{
  animation-name: anim;
  animation-duration: 5s;	
}

@keyframes anim{
    from{font-size:20px;}
    to{font-size:36px;}
}

Above code is indicating what class anim will do from and to , so in the above code from ( start point ) will be font-size: 20px; and to ( end point ) will be font-size:36px; So the above code will make an animation of text gradually increasing size of text from 20px to 36px with animation-duration: 5 seconds.

 

animation-name :- This is to mention which class / id / tag will be used to make the animation.
animation-duration :- This is used to inform code what is the time for the animation.
animation-delay :- This is used to delay in between animation frames.
animation-iteration-count :- This is used to inform code how many times animation will run. and the maximum is ” infinity ” that means animation will not stop.
animation-direction :- This is used to make animation directions like right , left , top , bottom.
animation-timing-function :- This is to inform animation how time will behave like ease , linear etc

• ease : Specifies an animation with a slow start, then fast, then end slowly (this is default)
• linear : Specifies an animation with the same speed from start to end
• ease-in : Specifies an animation with a slow start
• ease-out : Specifies an animation with a slow end
• ease-in-out : Specifies an animation with a slow start and end
• cubic-bezier(n,n,n,n) : Lets you define your own values in a cubic-bezier function ( n is the value )

animation-fill-mode :- This is used to inform if animation will come back to where it was started or ends on different point. So sub properties are either forwards or backwards.
animation :- This is shortcut for all the above properties in one line. an example given below :

.anim{
animation: anim 2s infinite;
}

@keyframes anim{
    from{font-size:20px;}
    to{font-size:36px;}
}

So in above code we wrote in just one line 3 properties of animation.  animation : (which class ) (animation-duration) (animation-iteration-count)

---

that’s it , i hope this post helps CSS learner to understand CSS animation with easy.

Some of Good css tutorials given below :-

Read How to make multiple Shadow using CSS

Read How to make Box shadows and Multiple Box Shadow using CSS