css3动画animation

关于动画animation的设置，主要有两部曲，它们分别是：

一、关键帧的设置

关键帧的设置，一定要加上各个浏览器的前缀名方可使用。

1.百分比写法

@keyframes  关键帧名{

　　时间的百分比{css设置}

}

2.from、to写法

@keyframes 关键帧名{

　　from{初始的css样式}

　　to{动画结束的css样式}

}

二、给选定的元素绑定关键帧

元素{

　　animation:关键帧名 动画时间 延迟执行时间 运行次数 动画模式 是否交替 动画结束后停留位置;

}

1）关键帧名 animation-name:我们设置的关键帧名

2）动画时间 animation-duration:单位为s/ms

3）延迟执行时间 animation-delay:单位为s/ms

4）运行次数 animation-iteration-count:infinite（无限次）/number;

5）动画模式 animation-timing-function:ease/linear/ease-in/ease-out/ease-in-out

　　ease 逐渐变慢

　　linear 匀速

　　ease-in 缓慢开始（加速）

　　ease-out 缓慢结束（减速）

　　ease-in-out 先加速后减速

6）是否交替 animation-direction:normal（默认）/reverse（反向）

7）动画结束后停留位置 animation-fill-mode:none（默认）/forwards/backwards/both

　　none 默认值，不设动画外的状态（开始）

　　forwards 停留在结束状态

　　backwards 停留在开始状态

　　both 停留在开始或结束状态（结束）

8）动画运行/暂停 animation-play-state:running（默认）/paused（暂停）

　　注(ˉ(∞)ˉ) ：在animation的简写里，是不可以设置该属性的，所以必须通过该属性的全写进行设置。

转载请注明出处，谢谢哒。。。。。。。

转载于:https://www.cnblogs.com/whiteMu/p/5387261.html