CSS3 animation（动画）属性详解

CSS3animation（动画）属性

animation-none ：指定有没有动画（可用于覆盖从从级联的动画）

animation-duration属性定义动画完成一个周期需要多少秒或毫秒

• time：指定动画播放完成花费的时间。默认值为 0， 意味着没有动画效果

animation-timing-function：使用的数学函数，称为三次贝塞尔曲线、速度曲线。使用此函数，你可以使用自己的值，或使用预先定义的值之一

• linear：动画从头到尾的速度是相同的
• ease：默认。动画从低开始，然后加快，在结束之前变慢。
• ease-in：动画以低速开始
• ease-out：动画以低速结束
• ease-in-out：动画以低速开始和结束
• cubic-bezier（n，n，n，n） 在cubic-bezier函数中自己的值。可能的值是从 0 到 1 的数值

animation-delay属性：定义动画什么时候开始。

• time：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

单位可以说秒（s）或毫秒（ms）

animation-iteration-count属性：定义动画应该播放多少次

• infinite：指动画应该播放无限次（永远）

animation-direction属性：定义是否循环交替反向播放动画

• normal：默认值。动画正常播放
• reverse：动画反向播放
• alternate：动画在奇数次（1、2、5…）正向播放，在偶数次（2、4、6…）反向播放
• alternate-reverse：动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

animation-fill-mode 属性：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

• none 默认值。：动画在动画执行之前和之后不会应用任何样式到目标元素。
• forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值
• backwards ：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
• both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

animation-play-state：指定动画是否正在运行或已暂停。

• paused 指定暂停动画
• running 指定正在运行的动画

initial：设置属性为其默认值。

• initial 关键字用于设置 CSS 属性为它的默认值
• initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

inherit ：从父元素继承属性

• inherit 关键字指定一个属性应从父元素继承它的值。
• inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。