CSS3 Animation属性大全

2019-09-04129次阅读css3

目前animation有下面9种属性,其中第一个是后面属性的简写形式。

属性描述
animation

下面各属性的简写(除了 animation-play-state)语法如下:

animation: name duration timing-function delay iteration-count direction fill-mode;

animation-name指定 @keyframes 动画的名称,语句中可以使用from...to结构,也可以使用百分比来定义。
animation-duration动画完成一个周期的时间,默认为 0s表示无动画
animation-timing-function

动画运行的'节奏',默认是 ease

ease
缓慢开始,缓慢结束

ease-in
先慢后快

ease-out
先快后慢

ease-in-out
以慢速开始和结束的过渡效果

linear
平滑效果

step-start
步进,忽略第一帧

step-end
步进,忽略最后一帧

step-middle
步进,从第一帧到最后一帧

animation-delay动画开始播放的延迟时间,默认是 0,允许负值,-2s使动画马上开始,但跳过2秒进入动画。
animation-iteration-count

动画播放的次数,默认是1,

不可以为负数,

infinite表示无限循环,

可以为小数,比如 0.5 代表播放动画的一半即结束。

animation-direction

规定动画是否在下一个周期逆向播放

normal: 每次从@keyframes 0%执行到100%,一个周期结束后立即回到0%的位置

alternate: 假设animation-iteration-count:infinite,从@keyframes 0%执行到100%后,再从100%的位置回到0%,周而复始

reverse: 每次从@keyframes 100%执行到0%,一个周期结束后立即回到100%的位置

alternate-reverse: 假设animation-iteration-count: infinite,从@keyframes 100%执行到0%后,再从0%的位置回到100%,周而复始

animation-fill-mode

用于设定动画时间外的属性,也就是说一个动画周期开始之前或结束之后,元素的状态应该是什么样的。该属性有四个属性值,分别是:
none:是默认值,表示动画播放完成后,恢复到初始的状态。

forwards:表示动画播放完成后,保持@keyframes里最后一帧的样式。

backwards:表示开始播放动画之前,元素的样式将设置为动画第一帧的样式

both:相当于同时配置了forwards和backwards。也就是说,动画开始前,元素样式将设置为动画第一帧的样式;而在动画线束状态,元素样式将设置为动画最后一帧样式。

animation-play-state

控制动画的运行或暂停,默认是running

该属性用于让一个动画的暂停与启动,有两个属性值,分别是running和pause,当设置为pause时,动画会立即会停在当前位置,当取消暂停后会在停住的位置继续执行,而不会回到原点(或终点)重新执行。

每个属性都可以添加多个属性值,他们之间用逗号隔开,就可以给一个元素添加多个动画。

上一篇: node mysql防止SQL注入转义查询值  下一篇: 使用animation-delay保留动画起始帧  

CSS3 Animation属性大全相关文章