Hello friends in this blog post we will learn about web page development Describe about (Animation) (CLASS:9) computer engineering students Now lets start.
ANIMATION
→ Animation is process of making space changes and creating motions with elements.
→ The CSS 3 animations feature allows you to create @ key frames animations.
→ Animations property:
. Animation-direction
. Animation-duration
. Animation-name
. Animation-iteration-count
→ Syntax:
@keyframes name
{
from value{property:value;}
to value{property:value;}
}
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>ANIMATION</title>
<link rel="stylesheet" type="text/css" href="animation.css">
</head>
<body>
<div class="animation"></div>
<div class="box"></div>
</body>
</html>
CSS CODE
@keyframes animation
0%{background-color: red}
25%{background-color: green}
50%{background-color: blue}
75%{background-color: yellow}
100%{background-color: pink}
.animation
{
height: 200px;
width: 200px;
background-color: red;
border:15px solid maroon;
animation-name: animation;
animation-duration:5s;
}
@keyframes box{
from{width: 200px}
to{width: 800px}
}
.box{
height: 200px;
width: 200px;
background-color: yellow;
animation-name: box;
animation-duration: 10s;
}
The output of the above examples will look something like this:
THIS YELLOW COLOUR IS ANIMATED USING ANIMATION-DURATION PROPERTY.
 (WPD)){kind=link}
0 Comments