Css3 Animation Tutorial And Reference

Published on: September 9, 2014   Last Updated on : December 7, 2014   Posted By : WebDesignReference

 

Css3 Animation : Create animation effects using css3 Animation property without using any flash script or javascript or animated images(gif images).

Properties of Css3 Animation :

  • animation
  • @keyframes

Css3 animation is created using @keyframe rule, which is actually bind to a selector when it change from one style to an other style.

CSS3
Animation Example

Example : use of Css Animation Property.

#animation-demo {
width: 60px;
height: 40px;
padding: 10px;
background: #1ec7e6;
color: #fff;
position: relative;
font-weight: bold;
font-size: 20px;
-webkit-border-radius: 5px;
animation: animation-demo 5s 1;
-moz-animation: animation-demo 5s 1;
-webkit-animation: animation-demo 5s 1;
-o-animation: animation-demo 5s 1;
}

@keyframes animation-demo {
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(10deg);left:0px;}
50% {transform: rotate(0deg);left:300px;}
75% {transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animation-demo {
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(10deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:300px;}
75% {-webkit-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animation-demo {
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(10deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:300px;}
75% {-moz-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animation-demo {
0% {-o-transform: rotate(0deg);left:0px;}
25% {-o-transform: rotate(10deg);left:0px;}
50% {-o-transform: rotate(0deg);left:300px;}
75% {-o-transform: rotate(0deg);left:300px;background:#16a085;color:blue;}
100% {-o-transform: rotate(-360deg);left:0px;}
}

 

Leave a Reply