HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT书包</title>
</head>
<body>
<div class="demo_box ease">ease</div>
<div class="demo_box linear">linear</div>
<div class="demo_box ease-in">ease-in</div>
<div class="demo_box ease-out">ease-out</div>
<div class="demo_box ease-in-out">ease-in-out</div>
<div class="demo_box step-start">step-start</div>
<div class="demo_box step-end">step-end</div>
<div class="demo_box steps">steps(2)</div>
<div class="demo_box cubic-bezier">cubic-bezier(0.52,0,0.58,1.0)</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 forwards;
-moz-animation:f1 2s 0.5s forwards;
position:relative;
left:10px;
width:50px;
height:50px;
border-radius:50px;
margin:10px 0;
overflow:hidden;
}
.ease{
-webkit-animation-timing-function:ease;
-moz-animation-timing-function:ease;
}
.linear{
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
}
.ease-in{
-webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
}
.ease-out{
-webkit-animation-timing-function:ease-out;
-moz-animation-timing-function:ease-out;
}
.ease-in-out{
-webkit-animation-timing-function:ease-in-out;
-moz-animation-timing-function:ease-in-out;
}
.step-start{
-webkit-animation-timing-function:step-start;
-moz-animation-timing-function:step-start
}
.step-end{
-webkit-animation-timing-function:step-end;
-moz-animation-timing-function:step-end;
}
.steps{
-webkit-animation-timing-function:steps(2);
-moz-animation-timing-function:steps(2)
}
.cubic-bezier{
-webkit-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);
-moz-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);
}
@-webkit-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
@-moz-keyframes f1{
0%{left:10px;}
100%{left:500px;background:#f00}
}