How to make Animated css with @keyframes
CSS Animations –
CSS animations is used to create the animation without JavaScript, Jquery and Flash. CSS and the HTML code is generated animations.
Animation Properties: animation, animation-delay, animation-direction, animation-duration,animation-fill-mode.
animation-name: @keyframes name.
Example : @-webkit-keyframes color-change { 50% { background:red;} 100% { background:green;} }
animation-name:color-change;
animation-duration: Animation complte in time. ( defined in seconds(s) or milliseconds(ms))
Example : animation-duration:8s;
animation-timing-function: It will define the speed of animation. ( ease, ease-in, ease-out, and linear)
Example : animation-timing-function: ease;
animation-delay: animation start time. ( defined in seconds(s) or milliseconds(ms))
Example : animation-delay:2s;( Animation start afrer 2sec on load page.)
animation-direction:
Type:normal, reverse, alternate, alternate-reverse
animation-iteration-count: Animation repeat time.
Example :animation-iteration-count:2; (Animation repeat 2 times)
animation-fill-mode: none,forwards,backwards,both,initial,inherit.
<style>
.box-move {
width:150px;
height:150px;
background:#2B4A80;
border-radius:100%;
margin:10px;
animation-name:move;
animation-duration:3s;
animation-delay:1s;
animation-iteration-count:5;
-webkit-animation-name:move; /* Prefix for Safari and Chrome */
-webkit-animation-duration:3s;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:20;
}
/*--------------------------------*/
.box-color {
width:150px;
height:150px;
background:#2B4A80;
animation-name:box-color;
animation-duration:2s;
animation-delay:1s;
animation-iteration-count:5;
-webkit-animation-name:box-color; /* Prefix for Safari and Chrome */
-webkit-animation-duration:2s;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:20;
}
/*--------------------------------*/
@keyframes move {
0% {transform:translate(0px); animation-timing-function:ease-in-out;}
100% {transform:translate(200px); animation-timing-function:ease-in-out;}
}
@-webkit-keyframes move /* Prefix for Safari and Chrome */ {
0% {-webkit-transform:translate(0px); -webkit-animation-timing-function:ease-in-out;}
100% {-webkit-transform:translate(200px); -webkit-animation-timing-function:ease-in-out;}
}
/*--------------------------------*/
@keyframes box-color {
0% {background:#FF0000;}
100% {background:#FFFA07;}
}
@-webkit-keyframes box-color /* Prefix for Safari and Chrome */ {
0% {background:#FF0000;}
100% {background:#FFFA07;}
}
</style>
<body>
<div class="box-move"></div>
<div class="box-color"></div>
</body>
How to Change the YouTube Embed Image to Custom Image
How to make Password Protect Page in WordPress ?
How to add digits of a numeric series
About The Author
