简易案列:
上下循环移动的动画效果:
HTML:
<div class="flutter">
<img src="images/flutter.png" >
</div>
CSS:
.flutter{
position: fixed;
left:1%;
width:15%;
animation:flutter 2s 1s ease-in-out infinite alternate;
// 动画名字,播放时间,延时时间,速度曲线,播放次数,是否轮流反向播放
}
.flutter img{
width:100%;
}
@keyframes flutter{
from{top:3%;}
to{top:10%}
}
关键参数:
1、速度曲线:
linear | 动画从头到尾的速度是相同的。 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
2、播放次数:
n | 定义动画播放次数的数值。 |
infinite | 规定动画应该无限次播放。 |
3、是否反向:
normal | 默认值。动画应该正常播放。 |
alternate | 动画应该轮流反向播放。 |