站点图标 独书先生

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