定义动画的格式:
@keyframes 动画名称{
阶段1{css样式}
阶段2{css样式}
阶段3{css样式}
}
每个阶段用百分比表示,即从0%到100%
起止必须设置即0%和100%,或者from和to
下列代码中的图片plane在屏幕中,呈W型运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img{
width: 150px;
-webkit-animation: plane 5s ease-in-out 1s;
-o-animation: plane 15s ease-in-out 1s;
animation: plane 5s ease-in-out 1s;
}
@keyframes plane { /*plane:动画名称*/
0%{
transform: translate(0px,0px);
}
25%{
transform: translate(100px,200px);
}
50%{
transform: translate(200px,00px);
}
75%{
transform: translate(300px,200px);
}
100%{
transform: translate(400px,00px);
}
}
</style>
<title>动画</title>
</head>
<body>
<img src="../../img/plane.jpg" alt="">
</body>
</html>