SEE LIVE Example
What are CSS3 Animations?
The CSS animation feature was introduced into Webkit in 2007. In 2009 a working draft was written and added to the w3c site.To use CSS animation, the most important and key concept is key-frames.you first specify some keyframes for the animation - basically what styles will the element have at certain times. The browser does the rest for you.
Animation is the process of creating motion and shape change or in real , illusion by means of the rapid display of a sequence of static images that minimally differ from each other. An animation lets an element gradually change from one style to another.
If you want to achieve such motion or movement of elements on web using css3 (rather than depending on tools like flash,silverlight..) you can define it as CSS3 animation You can change as many CSS properties you want, as many times you want.To use CSS3 animation, you must first specify some keyframes for the animation.Keyframes hold what styles the element will have at certain times .
Why CSS3 includes animation?
People who have experienced or worked with web they will definitely realize that animation was possible only by using heavy tools like flash ,silverlight..which was more about moving web experiences/website designing to software development components… In other words, we were using above mentioned tools for creating animation components which was heavy ,dependent and cumbersome experience.I don't disagree that Flash, Silver-light, AJAX, CSS – are all merely tools and all of them powerful in their own way – all of them appropriate for certain application.It is really great and very exciting that CSS3 styling language has support for Animation – Agree,we still have to wait bit to see how the standard is implemented across all browsers
Finally leaving all religious favor-ism to tools ,we have to agree css3 with animation is big change in web experience and will give boost to web experience
CSS3 ADVANTAGES:
There are mainly three key advantages over traditional Flash/silverlight and JS script-driven animation techniques:
- CSS3 Animation is declarative and easy to use for simple animations; you can create them without even having to know JavaScript.
- The animations run well because rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
- Giving power to browser for control the animation sequence which is surely optimized and efficient, for example, reducing the update frequency of animations running in tabs that aren't currently visible.
The Building Blocks of Animations
CSS animations are made up of two basic building blocks.- Keyframes - define the stages and styles of the animation.
- Animation Properties - assign the @keyframes to a specific CSS element and define how it is animated.
1 )@keyframes
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 make an animation work on webpage, we must bind bind the animation to respective element like div,span,image...Let us take simple example to understand css3 animation
The following example binds the "example" animation to the <div> element. The animation will lasts for 4 seconds, and it will gradually reduce the width of the <div> element from 100px to 10px:
SEE LIVE Example
After change animation-count property to infinite
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
from {width: 400px;}
to {width: 10px;}
}
/* Standard syntax */
@keyframes example {
from {width: 400px;}
to {width: 10px;}
}
</style>
</head>
<body>
<div></div>
<p><b>See:</b> When an animation is over, it will return its original style.</p>
</body>
</html>
In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)).
2: Animation Properties
Once the@keyframes are defined, the animation properties must be added in order
for your animation to function.Animation properties do two things:
- They assign the
@keyframesto the elements that you want to animate. - They define how it is animated.
animation-name: The name of the animation, defined in the@keyframes.animation-duration: The duration of the animation, in seconds (e.g., 5s) or milliseconds (e.g., 200ms).
Delay an Animation
The animation-delay property specifies a delay for the start of an animation.The following example has a 3 seconds delay before starting the animation:
Example
div {
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 3s;
}
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 3s;
}
Set How Many Times an Animation Should Run
The animation-iteration-count property specifies the number of times an animation should run.The following example will run the animation 5 times before it stops:
Example
div {
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 5;
}
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 5;
}
The following example uses the value "infinite" to make the animation continue for ever:
Example
div {
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Run Animation in Reverse Direction or Alternate Cycles
The animation-direction property is used to let an animation run in reverse direction or alternate cycles.The following example will run the animation in reverse direction:
Example
div {
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}
The following example uses the value "alternate" to make the animation first run forward, then backward, then forward:
Example
div {
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
width: 400px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
Specify the Speed Curve of the Animation
The animation-timing-function property specifies the speed curve of the animation.The animation-timing-function property can have the following values:
- 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
Example
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
How to use CSS3 animation
All in one example
The animations presented below involve setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which causes the transformation to take place incrementally over a set time period.
This is all illusion what we are creating with below sprite image with all possible steps of human while walking. you can choose horse,tiger .. any sprite image and find same animation.In reality we are showing one image at once with small small delay,which make feeling like an object is walking.
Let's get the use for step easing out of the way: sprite animation. The implementation is simple: jump the position of a
background-image (which has all the frames of an animation laid out side-by-side) so that we see one "frame" at a time: 
Steps()
The steps() function controls exactly how many keyframes will render in the animation time-frame.Complete Stunning Example
<html>
<head>
<title>Hello this is test</title>
<style>
.runninggirl {
margin-left: 400px;
width: 68px;
height: 100px;
background-image: url("http://www.shabirhakim.net/img/ladyrun.png");
-webkit-animation: play .8s steps(5) infinite;
-moz-animation: play .8s steps(5) infinite;
-ms-animation: play .8s steps(5) infinite;
-o-animation: play .8s steps(5) infinite;
animation: play .8s steps(5) infinite;
}
@-webkit-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -500px;
}
}
@-moz-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -500px;
}
}
@-ms-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -500px;
}
}
@-o-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -500px;
}
}
@keyframes play {
from {
background-position: 0px;
}
to {
background-position: -500px;
}
}
</style>
</head>
<body>
<div class="runninggirl">
</div>
</body>
</html>
