Now we can create eye catching animation using CSS3 and HTML5, so to describe that feature. We have explained how to create ticking or rotating clock hand in middle of the circle using CSS3 animation.
In this simple article on creating CSS3 animation we have used two important CSS3 properties.
- animation
- @keyframes
Note that we have to add prefix of -webkit-, -moz-, -ms-, -o-, infront of animation and keyframes to work on respective browsers.
Simple HTML5 CSS3 Animation code:
Below is the sample code which creates the ticking hand animation over circular background. Code explanation is below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple CSS3 Animation</title>
<style>
#rectBox{
width:100px;
height:10px;
background:#666;
position:absolute;
top:200px;
left:200px;
/*Chrome*/
-webkit-animation:colorChange 5s linear .5s infinite;
-webkit-transform-origin:0% 50%;
/*Mozilla*/
-moz-animation:colorChange 5s linear .5s infinite;
-moz-transform-origin:0% 50%;
/*Opera*/
-o-animation:colorChange 5s linear .5s infinite;
-o-transform-origin:0% 50%;
}
#circle{
width:200px;
height:200px;
background:#666;
position:absolute;
top:105px;
left:100px;
border-radius:50%;
}
/*Chrome*/
@-webkit-keyframes colorChange
{
0% {background: red; -webkit-transform: rotate( 0deg );}
50% {background: blue; -webkit-transform: rotate( 180deg );}
100% {background: red; -webkit-transform: rotate( 360deg );}
}
/*Mozilla*/
@-moz-keyframes colorChange
{
0% {background: red; -moz-transform: rotate( 0deg );}
50% {background: blue; -moz-transform: rotate( 180deg );}
100% {background: red; -moz-transform: rotate( 360deg );}
}
/*Opera*/
@-o-keyframes colorChange
{
0% {background: red; -o-transform: rotate( 0deg );}
50% {background: blue; -o-transform: rotate( 180deg );}
100% {background: red; -o-transform: rotate( 360deg );}
}
</style>
</head>
<body>
<div id="circle"></div>
<div id="rectBox"></div>
</body>
</html>
HTML5 & CSS3 Animation code explanation:
The core concept behind this css3 animation is with the help of two new css3 properties as said earlier in the article.
css3 animation property:
To animate any style with css3 animation property. We have to configure the timing and duration of the animation, also how the animation sequence should progress over time as keyframes.
Some of the css3 animation sub properties are
animation-name
Specifies the name of the @keyframes at-rule describing the animation’s keyframes.
animation-duration
Configures the length of time that an animation should take to complete one cycle.
animation-timing-function
Configures the timing of the animation; that is, how the animation transitions through keyframes.
animation-delay
Configures the delay between the time the element is loaded and the beginning of the animation sequence.
animation-iteration-count
Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
Example:
animation:colorChange 5s linear .5s infinite;
css3 animation sequence using keyframes:
Keyframe describes how the animated element should render at a given time during the animation sequence.
We can define keyframes of the animation in either
- Percentage
- From to
In the example we have used percentage method to define keyframes
@-webkit-keyframes colorChange
{
0% {background: red; -webkit-transform: rotate( 0deg );}
50% {background: blue; -webkit-transform: rotate( 180deg );}
100% {background: red; -webkit-transform: rotate( 360deg );}
}
Conclusion:
So this is a simple method to create css3 animation properties using html5, If you have any suggestion or doubt comment below.
keywords to here:
- css animations
- css3 animation property
- css3 keyframe
- css keyframe animation
Related posts: