<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IT书包</title> </head> <body> <div class="demo_box animation_duration">我一共运行了2秒钟</div> </body> </html>
.demo_box {
border: 1px solid #3DA5DC;
background: #a4dcf9;
height: 100px;
width: 200px;
text-align: center;
color: #fff;
}
.animation_duration{
left:10px;
top:100px;
position:absolute;
-webkit-animation:0.5s ease 1 forwards;
-webkit-animation-duration:2s;
-webkit-animation-name:demo;
-moz-animation:0.5s ease 1 forwards;
-moz-animation-name:demo;
-moz-animation-duration:2s;
}
@-webkit-keyframes demo{
0%{left:10px;}
100%{left:400px;}
}