<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img{
width: 150px;
animation: plane 7s ease-in-out infinite ;
}
@keyframes plane {
0%{
transform:translate(0px,0px);
}
20%{
transform: translate(200px,300px) skewY(20deg);
}
40%{
transform: translate(400px,0px) skewY(-10deg);
}
60%{
transform: translate(600px,300px) skewY(20deg);
}
80%{
transform: translate(800px,0px)skewY(-10deg);
}
100%{
transform: translate(1000px,300px) skewY(20deg);
}
}
</style>
<title></title>
</head>
<body>
<img src="../../img/plane.jpg" alt=""/>
</body>
</html>
<!--CSS动画
@keyframes:定义一个动画
animation:在HTML元素上应用动画-->
<!--定义动画
@keyframes 动画名称{
阶段1{CSS样式}
阶段2{CSS样式}
阶段3{CSS样式}
..... }
阶段:每个阶段-->
<!--CSS动画:
animation-name:动画名称 ***必须指定
animation-Duration:动画持续时间 ***必须指定
animation-timing-function:动画速度曲线
animation-delay:动画开始的时间,延迟
animation-iteration-count:动画播放次数,默认为1.
N:播放次数。
infinite:无限次循环。
animation-direction:动画在下一个是否逆向播放,默认为normal.
anition-state:
animation-fill-mode:规定对象动画时间之外的状态
none:不改变默认行为
forwards:在动画完成后,保持最后的CSS样式
backwards:在动画完成后,回到最初的CSS样式
both:向前和向后填充的样式都被应用-->