<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IT书包</title> </head> <body> <div class="demo_box animation_name">看我没事来回跑</div> </body> </html>
.demo_box {
border: 1px solid #3DA5DC;
background: #a4dcf9;
height: 100px;
width: 200px;
text-align: center;
color: #fff;
}
.animation_name{
left:0;
top:100px;
position:absolute;
-webkit-animation:0.5s 0.5s ease infinite alternate;
-webkit-animation-name:demo;
-moz-animation:0.5s 0.5s ease infinite alternate;
-moz-animation-name:demo;
}
@-webkit-keyframes demo{
0%{left:0;}
100%{left:400px;}
}