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;

//&nbsp;动画名字,播放时间,延时时间,速度曲线,播放次数,是否轮流反向播放
}
.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动画应该轮流反向播放。

发表评论