CSS Animation
Advertisements
CSS Animation
CSS Animation is used to create animation on the webpage. CSS3 animations can replace the animations created by Flash and JavaScript on web pages. CSS Animation is available in CSS3.
CSS3
Animation
Animation
CSS3 @keyframes Rule
In CSS animation is created in the @keyframe rule. It is used to change animation from the current style to the new style.
CSS3 Animation
When an animation is created in the @keyframe rule, you must need to bind it with selector, otherwise the animation will have no effect.
The animation could be bind with selector (Html element) by specifying at least below two properties;
- the name of the animation
- the duration of the animation
CSS animation properties
| Property | Description |
|---|---|
| @keyframes | It is used to specify the animation. |
| animation | This is a shorthand property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property. |
| animation-delay | It specifies when the animation will start. |
| animation-direction | It specifies if or not the animation should play in reserve on alternate cycle. |
| animation-duration | It specifies the time duration taken by the animation to complete one cycle. |
| animation-fill-mode | it specifies the static style of the element. (when the animation is not playing) |
| animation-iteration-count | It specifies the number of times the animation should be played. |
| animation-play-state | It specifies if the animation is running or paused. |
| animation-name | It specifies the name of @keyframes animation. |
| animation-timing-function | It specifies the speed curve of the animation. |
Example
<html>
<head>
<style>
.myanimation {
height:100px;
width:100px;
background: red;
animation: myanimation 5s;
-webkit-animation: myanimation 5s; /* Chrome, Safari, Opera */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myanimation {
from {background: red;}
to {background: yellow;}
}
@keyframes myanimation {
from {background: red;}
to {background: yellow;}
}
</style>
<body>
<div class="myanimation"></div>
</body>
</html>
Result
Example
<!DOCTYPE html>
<html>
<head>
<style>
.rolling-ball{
width: 100px;
height: 100px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: red;
position: relative;
-webkit-animation: rolling-ball 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes rolling-ball {
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 rolling-ball {
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;}
}
</style>
</head>
<body>
<div class="rolling-ball"></div>
</body>
</html>
Result
Code of First Animation
Example
<!DOCTYPE html>
<HTML>
<HEAD>
<style>
#animation-div
{
width:80px;
height:50px;
background:#B901A9;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
text-align:center;
animation:animation-div 5s 1;
-moz-animation:animation-div 5s 1;
-webkit-animation:animation-div 5s 1;
-o-animation:animation-div 5s 1;
border-radius:6px;
-webkit-border-radius:6px;
}
@keyframes animation-div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}
@-webkit-keyframes animation-div
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(360deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#00E2FF;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}
@-moz-keyframes animation-div
{
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:500px;}
55% {-moz-transform: rotate(0deg);left:500px;}
70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}
@-o-keyframes animation-div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}
</style>
</HEAD>
<BODY>
<div id="animation-div">CSS3<br><span style="font-size:15px;">Animation</span></div>
</BODY>
</HTML>
Result
CSS3
Animation
Animation
Browser supported
| Property | |||||
| @keyframes | Yes | Yes | Yes | Yes | Yes |
| animation | Yes | Yes | Yes | Yes | Yes |
Google Advertisment