您的位置:首页 - 教程 - CSS - 正文
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的简写里,是不可以设置该属性的,所以必须通过该属性的全写进行设置。

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


评论: