How to move a div from left to right using CSS3 Animation?

How to move a div from left to right using CSS3 Animation?

Compare to Flash or JavaScript animation CSS3 animation render faster. Animation is a new feature introduced in CSS3. Performance wise CSS3 animations are more programmers friendly. In this session let us make you clear about the trick to use CSS3 animation.

In CSS3 animation 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 CSS3 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.

CSS3 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.

Example of CSS3 Animation

<!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>