CSS3 animations can replace the old fashioned flash animations. You can lessen the bandwidth usage by replacing the flash animations with CSS3 animations.
This is a simple example of CSS3 animation, a div element changing its background from red to yellow:
This is a simple example of CSS3 animation, a div element changing its background from red to yellow:
@keyframes rule
The @keyframes is where the animations is created. Now if you don't know about "frames", here it is:
A key frame in animation and filmmaking is a drawing that defines the starting and ending points of any smooth transition. The drawings are called "frames" because their position in time is measured in frames on a strip of film.I think its clear now. In the @keyframes rule we create the frames or starting and ending points for any animation.
Specify any style in "frame" and the animation will gradually change from current style to the specified new style.
CSS3 animation
When an animation is created in the @keyframes rule, you must attach it to some HTML element to work. Otherwise the animation will remain useless and will show no effect.
Bind the animation to any selector (HTML element) with specifying at least two properties:
- the name of the animation
- the duration of the animation
Below code snippet is to create an animation of 5sec on div element with name myfirst:
div {
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
Output
Note: You must have to specify the duration time for an animation. If no time is specified, the animation will have no effect, because the default value is 0.
CSS3 animations (explained)
An animation is
the technique of photographing successive drawings or positions of puppets or models to create an illusion of movement when the film is shown as a sequence.CSS3 animation let any element gradually change from one style to another.
You can change as many properties as you want, as many times you want.
You can specify that at what frame change should happen in percents, or you can use the keywords "from" and "to" to specify the changes.
"From" represents 0% and "to" represents 100%.
0% represents the start of the animation, and 100% represent the end of the animation.
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Output
In the below example there is a div element, which changes its background color as well as its position at the given time:
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
Output
We can also make an animation with infinite loop. Means some time you just need an animation no to stop, you want it to keep running. You can also do this in CSS3 animations.
To create an animation with infinite loop you just need to declare the animation this way:
div {
animation: myfirst 5s infinite;
}
Look at this more good example of CSS3 animation:
div {
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
Output
div {
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
}
Output CSS3 Animation Properties
| Property | Description |
|---|---|
| @keyframes | Specifies the animation |
| animation | A shorthand property for setting all the animation properties, except the animation-play-state and the animation-fill-mode property |
| animation-delay | Specifies when the animation will start |
| animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
| animation-duration | Specifies how many seconds or milliseconds an animation takes to complete one cycle |
| animation-fill-mode | Specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a "delay") |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |
| Qouted from: W3Shools | |
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.