CSS:animation 属性简写速查 | 简单动画效果

简易案列：

上下循环移动的动画效果：

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	动画应该轮流反向播放。