CSS3 Animations
CSS3
Animations
By css3
animations method we can animate all
html elements .
For applying
the animation method in css we need to know about two thing
1.
@keyframes (its mean what kind of
animation we are applying on css)
2.animation
( animation is also another element by this we set the duration of
Animation
also we bind the animation by some element)
Example:-
Got to link below the you will see the live example of
coddling below.
<html>
<head>
<title>csszilla</title>
<!--------------------csszilla--------------------->
<style>
.red {
background-color:orange;
font-size:24px;
padding-left:10px;
margin:50px;
color:white;
width:100px;
height:100px;
display:block;
animation-duration:4s;
-webkit-animation-name:
colorchnage; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s;
/* Chrome, Safari, Opera */
animation-name: colorchnage;
animation-iteration-count:
infinite;
border-radius:12px;
}
/* Standard
syntax */
@keyframes
colorchnage {
from {
background-color:
red;
}
to {
background-color: yellow;
}
</style>
</head>
<body>
<h2>css3
animation method</h2>
<div
class="red">I gonna change</div>
</body>
</html>
Comments
Post a Comment