HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT书包</title>
</head>
<body>
<div class="demo_box normal">normal</div>
<div class="demo_box reverse">reverse</div>
<div class="demo_box alternate">alternate</div>
<div class="demo_box alternate-reverse">alternate-reverse</div>
</body>
</html>
CSS
.demo_box {
border: 1px solid #3DA5DC;
background: #a4dcf9;
height: 100px;
width: 200px;
text-align: center;
color: #fff;
}
.demo_box{
-webkit-animation:f1 2s 0.5s 10 forwards linear;
-moz-animation:f1 2s 0.5s 10 forwards linear;
position:relative;
left:10px;
width:100px;
height:100px;
margin:10px 0;
overflow:hidden;
}
.normal{
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
}
.reverse{
-webkit-animation-direction:reverse;
-moz-animation-direction:reverse;
}
.alternate{
-webkit-animation-direction:alternate;
-moz-animation-direction:alternate;
}
.alternate-reverse{
-webkit-animation-direction:alternate-reverse;
-moz-animation-direction:alternate-reverse;
}
@-webkit-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
@-moz-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}