ANIMATION:-
An animation lets an element gradually change from one style to another, we can change as many CSS properties and many times as we want.
- To use CSS3 animation, we must first specify some keyframes for the animation.Keyframes hold what styles the element will have at certain times.
- When we specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
- To get an animation to work, we must bind the animation to an element.
EXAMPLE:-
<html>
<head>
<style>
div {
width: 200px;
height: 150px;
background-color: steelblue;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count:3;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
@-webkit-keyframes example {
0% {background-color:steelblue;
left:0px; top:0px;}
25% {background-color:yellow;
left:200px; top:0px;}
50% {background-color:blue;
left:200px; top:200px;}
75% {background-color:green;
left:0px; top:200px;}
100% {background-color:orange;
left:0px; top:0px;}
}
</style>
</head>
<body>
<p><h3>ANIMATION</h3> </p>
<div></div>
</body>
</html>
OUTPUT:-
No comments:
Post a Comment