CSS3 Translate Animation Examples
CSS3 Translate Animation Examples
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Translate Animation Examples</title>
<style type="text/css">
.box {
margin: 50px;
width:153px;
height:103px;
background: url("css3.jpg") no-repeat;
position: relative;
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
animation-name: moveit;
animation-duration: 2s;
}
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
</style>
</head>
<body>
<p><strong>Note:</strong> Click the "Show Output"
button to repeat the animation.</p>
<div class="box"></div>
</body>
</html>
Output