Home >>CSS Tutorial >CSS Animation
CSS Animation
CSS Animation
The CSS animation is used to control the elements by changing their motions or display. CSS animation is a technique to change the appearance and behavior of various elements in web pages. It is he process of creating motion effects and change the appearance on the web pages. The CSS Animation contains two parts, one which contains the CSS properties which describes the animation of the elements and the other is certain keyframes which indicates the animation properties of the element at the specific time intervals which the animations have occur. It can be used as a replacement of animation created by JavaScript and flash.
The @keyframes rule:It is used to control the respective stages of its whole duration and also used to control the intermediate steps in a CSS animation sequence. For Example: The heading changes it’s color with time. At 0% completion it is orange, at 50% completion it is of green color and full completion i.e. at 100% it is blue. It will gradually changes the current style to the new style.
Let's take an Example of CSS Animation:
<!DOCTYPE html>
<html>
<head>
<style>
#phptpoint {
animation-name: changebg;
-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
animation-iteration-count: infinite;
animation-duration: 10s;
padding-top:30px;
padding-bottom:30px;
}
#php {
font-size: 40px;
text-align:center;
font-weight:bold;
color:#090;
color:#fff;
padding-bottom:5px;
}
#php1 {
font-size:17px;
font-weight:bold;
color:#fff;
text-align:center;
}
@keyframes changebg {
0% {
background-color: #f5a92f;
}
50% {
background-color: #afed64;
}
100% {
background-color: #66dbed;
}
}
</style>
</head>
<body>
<div id = "phptpoint">
<div id = "php">Phptpoint</div>
<div id = "php1">welcome to phptpoint</div>
</div>
</body>
</html>
CSS animation properties
| Property | Description |
|---|---|
| @keyframes | It is used to specify the animation code to an element. |
| Animation | This is a shorthand property, used for setting all the animation properties. |
| Animation-delay | It specifies delay when the animation will start. |
| Animation-duration | It specifies how long time duration should take to complete one cycle. |
| Animation-iteration-count | It specifies that how many times an animation should be played with the number of times. |
| Animation-direction | It specifies if an animation should be play in reserve or in alternate cycles. |
| Animation-fill-mode | It specifies the static style when the animation is not playing in an element (before it starts, after it ends, or both). |
| Animation-play-state | It defines whether the animation is running or paused. |
| Animation-name | It defines the name of @keyframes animation. |
| Animation-timing-function | It defines the animation speed curve. |
CSS Animation Example: up And down Text
Let's take another example of animation-duration :
<!DOCTYPE html>
<html>
<head>
<style>
#animate {
animation-name: textmove;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#animate1 {
font-size: 40px;
text-align:center;
font-weight:bold;
color:#090;
padding-bottom:5px;
}
#animate2 {
font-size:17px;
font-weight:bold;
text-align:center;
}
@keyframes textmove {
from {
margin-top: 400px;
}
to {
margin-top: 0px;
}
}
</style>
</head>
<body>
<div id = "animate">
<div id = "animate1">PHPTPOINT</div>
<div id = "animate2">Hello world</div>
</div>
</body>
</html>
Animation Shorthand Property
CSS shorthand property is used to shorten the code.
Let's take an example of animation shorthand property :
<!DOCTYPE html>
<html>
<head>
<style>
div.shorthand {
width: 100px;
text-align:center;
font-weight:bold;
height: 100px;
background-color: #a7ed37;
position: relative;
/* Safari 4.0 - 8.0 */
-webkit-animation-name: movebox;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
/* Standard syntax */
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes movebox {
0% {background-color:#c46ff2; left:0px; top:0px;}
25% {background-color:#f556e5; left:200px; top:0px;}
50% {background-color:#5de8cc; left:200px; top:200px;}
75% {background-color:#e81a4d left:0px; top:200px;}
100% {background-color:#c46ff2; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:#c46ff2; left:0px; top:0px;}
25% {background-color:#f556e5; left:200px; top:0px;}
50% {background-color:#5de8cc; left:200px; top:200px;}
75% {background-color:#e81a4d; left:0px; top:200px;}
100% {background-color:#c46ff2; left:0px; top:0px;}
}
</style>
</head>
<body>
<div class="shorthand">PHPTPOINT</div>
</body>
</html>