Friday, 3 July 2015

Web Design : All about CSS 3 animation

Posted by M2Software Solutions Solutions Pvt. Ltd | 02:13 Categories: , , ,
web designingA great way to put some animation effects on specified element is CSS3 animation. 

1. @keyframes


@keyframes allows us to divide animation in frames. Without keyframe animation won't work. You can specify initial and final property by using percentage or using keywords like “from”, “to”.

@keyframe value_of_animation_name_property{ from{} to{} }

2. Animation properties : 


  • Animation-name.
  • Animation-duration.
  • Animation-timing-function.
  • Animation-delay.
  • Animation-iteration-count.
  • Animation-direction.
  • Animation-play-state.

Animation-name : 


With the help of Animation name property you can specify the name to the animation. It helps you to create unique identity of specified animation effect. Animation-name will be used in the syntax of @keyframes.
Example. animation-name : sushrut;

Animation-duration :


This property represents  the duration of the animation. The value of this property is generally written in seconds or milliseconds.
Example. animation-duration: 3s;

Animation-timing-function : 


Sometimes animation varies speed from between its stars to end. To control its speed Animation-timing-function is used.

Example: animation-timing-function: ease-in;

Animation-timing-function values.
  • Linear:  Maintains same speed thoughout animation
  • Ease: Start with fast speed and ends with slow speed.
  • Ease-in: Start with slow speed and ends with fast speed.
  • Ease-out: Looks same as Ease.
  • Ease-in-out: Start with slow, increases speed at middle and ends with slow speed.

Animation-delay : 


It represents the speed of the animation. The value of this property is generally written in seconds or milliseconds. More seconds means more delay.

Example. animation-delay: 3s;

Animation-iteration-count : 


Animation-iteration-count represents the frequency of the animation.

Example. animation-iteration-count: 5;

Animation-direction : 


Animation-direction defines normal and reverse direction.

Example: Animation direction: alternate;

Animation direction values.

normal: Animation will work normally. Animation will start from starting frame and ends with ending frame. Again start with starting frame and so on.

reverse:  Animation will be reverse. Animation will start from ending frame and ends with starting frame. Again start with ending frame and so on.

alternate: Animation will start from starting frame and ends with ending frame. Then start with ending frame and ends with starting frame and so on

alternate-reverse:  Animation will start from ending frame and ends with starting frame. Then start with starting frame and ends with ending frame and so on.

Animation-play-state : 


Animation-play-state values helps to decide whether the animation should keep running or pause. Default value is running.

Example: animation-play-state: paused;

Animation compatibility extension according to browser.


If you have read the following example, you will see that, I have added same code twice and added webkit extension in one of them. Why I have done that? Because I want, animation should work for all browsers. If I run the code without using webkit, then animation will not work on Google Chrome, Opera and Safari. Animation will work on Mozilla Firefox.

Regards : Web Designing company 


1 comment:

  1. Thank you so much for your post. This post really help me a lot and I have learnt some new things from your blog.


  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube