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.

    ReplyDelete

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