CSS3动画(animation)——且听风吟720

Posted shige720

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3动画(animation)——且听风吟720相关的知识,希望对你有一定的参考价值。

CSS动画animation

  可以让页面中指定的元素按照设定的方式“动”起来,运用的是人视觉延迟的原理,连续地在上一张图消失之前插入下一张

  其中需要设置的属性值如下:

1.animation-name

  对象的动画名称,以便后续设置动画属性时使用

  默认为none,如果设置的话即为要设置动画的关键帧的名字

  后续对该元素设置动画时,要用@keyframes,设置起始的样式(from)和终止的样式(to)

 2.animation-duration

  动画持续的时间(播放完成所花时间)

  默认值为0,可设置单位为秒(s)毫秒(ms)

3.animation-timing-function

  动画的过度方式

  常用的有:linear(线性过渡)、ease(平滑过渡)、ease-in(由慢到快)、ease-out(由快到慢)、ease-in-out(由慢到快再到慢)

  如有复杂需求,要设置贝塞尔曲线(cubic-bezier(数值1,数值2,数值3,数值4)),其中四个数值范围为0-1

4.animation-delay

  动画开始前等待时间(该时间不包括在动画放映时间内)

  默认值为0,可设置单位为秒(s)毫秒(ms),如设置负值立即开始动画

  注:设置的时间带有小数点时,建议省去整数部分,如0.5写成.5

5.animation-interation-count

  动画循环次数

  值为数字,默认为1,也可设置infinite(无限循环)

6.ainmation-direction

  动画循环时的方向

  可设置的值有:none(保留原有样式,默认值)、reverse(反向)、alternate(先正常再反向并交替进行)、alternate-reverse(先反向再正常并交替进行)

  其中alternate和alternate-reverse必须在循环次数不为1时才生效

7.animation-fill-mode

  动画不播放(已经放完/有延迟没播放)时的元素样式

  可设置的值有:none(没有样式,默认值)、forwards(结束时状态)、backwards(开始时状态)、both(同时设置开始和结束时状态)

8.animation-play-state

  动画状态,即播放/暂停

  可设置的值有:running(播放,默认值)、pause(暂停)

9.animation的简写

  其中必须设置nameduration

  解析时,默认把第一个字符串属性值解析为name第一个带有时间的属性值解析为duration之后一个带有时间的属性值解析为delay

 /*按照每个元素来写的动画属性*/
1
div 2 width:100px;height:100px; 3 animation-name:outside; 4 animation-duration:2s; 5 animation-timing-function:linear; 6 animation-delay:1s; 7 animation-iteration-count:infinite; 8 animation-direction:alternate-reverse; 9 animation-fill-mode:forwards; 10 animation-play-state:pause; 11 12 @keyframes outside 13 fromtransform:translateY(0px); 14 totransform:translateY(1000px); 15

 

以上是关于CSS3动画(animation)——且听风吟720的主要内容,如果未能解决你的问题,请参考以下文章

css3动画animate.css的使用

css3 实现逐帧动画

CSS3 animation 动画用法介绍

css3的-webkit-animation动画执行后会变回原来的样子,怎么保留住动画最后的状态呢?

css3动画基础详解(@keyframes和animation)

CSS3 旋转动画导致 Animate.css 抖动动画消失