CSS3 Infinite Translate Animation Examples
CSS3 Infinite Translate Animation Examples
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Infinite Translate Animation Examples</title>
<style type="text/css">
.box {
margin: 50px;
width:103px;
height:130px;
background: url("css3.jpg") no-repeat;
position: relative;
-webkit-animation: repeatit 2s linear 0s infinite alternate;
animation: repeatit 2s linear 0s infinite alternate;
}
@-webkit-keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}
@keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output