Compare to Flash or JavaScript animation CSS3 animation render faster. Animation is a new feature introduced in CSS3. Performance wise CSS3 is more programmers friendly. In this session let us make you clear about the trick to use CSS animation.
In CSS3 2 major properties are “animation” & “@keyframes”. Refer to the below example I have a div with a class “animation”. To apply animation on this div I created a class animation. Inside the class I added CSS3 property animation: demoAnimation 5s;. Here demoAnimation is controlled by keyframes. Using @keyframes we need to define from & to properties. As in this example I am moving a div from left to right, I positioned the div to absolute and applying left property from 0 to 200px.
To support animation in all browser here I used animation property for IE & FireFox. To render the same in Google Chrome, Safari & Opera I used -webkit-animation. The similar I did for @keyframes.
CSS animation comes with some major properties like animation, @keyframes, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state & animation-timing-function.
Move a DIV from Left to Right Example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to move a div from left to right?</title>
<style type="text/css">
.animation {
/* IE & FireFox */
animation: demoAnimation 5s;
/* Chrome, Safari & Opera */
-webkit-animation: demoAnimation 5s;
position: absolute;
}
/* IE & FireFox */
@keyframes demoAnimation {
from {left: 0px; background: red;}
to {left: 200px; background: yellow;}
}
/* Chrome, Safari & Opera */
@-webkit-keyframes demoAnimation {
from {left: 0px; background: red;}
to {left: 200px; background: yellow;}
}
</style>
</head>
<body>
<div class="animation">This is a Div.</div>
</body>
</html>
