CSS Animation in Web Designing

CSS Animation

CSS animation allows you to animate the transition from one CSS style configuration to another.
 The animation consists of two components, a style that describes the CSS animation and a set
 of keyframes that indicate the starting intermediate route points along the initial and final states 
of the animation style.

CSS animation is a technique of web designing training in chandigarh that really gain steam 
in this time. It is one of the most interesting, attractive and innovative techniques. An animation 
turns an element gradually from one style to another. You can change as many times as many 
CSS properties as you like. For using CSS animation, you must first specify some keyframes 
for the animation. Keyframes hold that the elements will definitely have the element.

Keyframes Rules:-

When you specify the CSS styles within a @keyframes rule, the animation will gradually change
 from current style to the new style at some time. To get the animation to work, you have to tie 
the animation to the element.

The following example links the example graphic to the <div> element. An animation will last up to
 4 seconds, and it will gradually change the background colour of "yellow" from "red" to <div> 
element:

  
Key Advantage of CSS Animation:

There are three main advantages of CSS animations on traditional script-driven animation techniques:

• They are easy to use for simple animations; You can create them without even having to

 know JavaScript.
 

• The animations work well, even under the moderate load of the system. Simple animations

 can often have low performance in JavaScript (unless they are well done). The rendering 
engine can use frame hopping and other techniques to keep performance as smooth as 
possible.

• Controlling the animation sequence to the browser allows the browser to optimize 

performance and efficiency, for example, reducing the updated frequency of the 
animation running in the tab that is not currently visible.

CSS Animation Configuration:-

To create a CSS animation sequence, stylize the element you want to animate with the 
animation property or its sub-properties. This lets you set the timing, duration, and other 
details about how the animation sequence progresses. This does not configure the actual 
appearance of the animation, which is using @ keyframes in the rule as defined in the animation
 sequence definition using the mainframes below. The animation properties are:

Animation-delay

Configures the delay between element loading and the beginning of the animation sequence.

animation-direction
Sets whether or not the animation should alternate the direction in each execution through the 
sequence or reset the starting point and repeat.

Animation-duration

Sets the amount of time that animation should take to complete a single session.

Animation-iteration-count

Set the number of times the animation should be repeated; You can specify infinity to repeat the
 animation indefinitely.

Animation-name

Specifies the name of keyframes-on-rule that describes the main frames of animation.

Animation-play-state
It allows you to pause and resume the animation sequence.

Animation-timing-function
Arrange timing animation; ie how animations move through keyframes, by creating acceleration 
curves.

Animation-fill-mode
Set the values ​​applied by the animation before and after execution.

CSS Animation is very important part of web Designing for creating effective websites Get more 
information about CSS Animation with Web Designing Training in Chandigarh .