What are CSS Animations?

CSS Animations

CSS animations allows animation of most HTML elements without using JavaScript or Flash!
CSS

Browser Support for Animations

The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
Property
@keyframes43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-
animation43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-

What are CSS Animations?

An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the "example" animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":

Comments

Post a Comment

Popular posts from this blog

Define closure ?

Define closure. In JavaScript, we need closures when a variable which is defined outside the scope in reference is accessed from some inner scope. var  num  =  10 ;   function sum()    {   document.writeln(num+num);   }    sum();  
Read more

CSS Layout - The position Property

Image
The  position  property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). The position Property The  position  property specifies the type of positioning method used for an element. There are five different position values: static relative fixed absolute sticky Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the  position  property is set first. They also work differently depending on the position value. position: static; HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with  position: static;  is not positioned in any special way; it is always positioned according to the normal flow of the page: This <div> element has position: static; Here is the CSS that is used: div.static  {   position :  static ;   
Read more