html帧动画简单属性,CSS3 动画属性

animation-name 调用动画

animation-name属性，主要是用来调用动画，其调用的动画是通过@keyframes关键帧定义好的动画。 该属性的使用语法如右所示： animation-name: none | IDENT[ none| DENT]*;

animation-name 是用来定义一个动画的名称， 其主要有两个值。

·IDENT：是由@keyframes创建的动画名称， 换句话说 此处的 IDENT(标识符)需要和@keyframes中的IDENT一致， 如果不一致将不能实现任何动画效果。

·none：为默认值，当值为none 时，将没有任何动画效果，其可以用于覆盖任何动画。

animation-duration设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间， 其基本语法如右所示： animation- duration: < time>[< time>]*

animation-duration和transition-duration使用方法类似，是用来指定元素播放动画所持续的时间，也就是完成从0% ～100% 一次动画所需时间， 取值< time>为数值，单位为秒，其默认值为 0，这意味着动画周期为0，也就是没有动画效果。如果值为负值会被视为0。

animation-timing-function 设置动画播放方式

animation-timing-function属性主要是用来设置动画播放方式， 其基本语法如右所示： animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out

animation-timing-function是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。 他和transition中的transition-timing-function一样， 具有以下几种变换方式： ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。

animation-delay 设置动画开始播放的时间

animation-delay属性用来定义动画开始播放的时间、 是延迟还是提前等。 该属性的基本语法右所示： animation- delay:< time>[,< time>]* 换句话说， animation- delay 属性用于定义在浏览开始 执行动画之前等待的时间。

animation-iteration-count 设置动画播放次数

animation-iteration-count 属性主要用来定义动画的播放次数。其基本语法如右所示： animation-iteration-count: infinite | < number> [, infinite | < number>]* 此属性主要用于定义动画播放多少次，其值通常为整数，但也可以使用带有小数的数字。其默认值 1，这意味着动画将从开始到结束只播放一次。 如果取值为infinite，动画将会无限次地播放。infinite(无限循环)

animation-direction 设置动画播放方向

animation-direction属性主要用来设置动画播放方向， 其基本语法如右所示： animation- direction: normal | alternate [, normal | alternate]* animation- direction 是用来指定元素动画播放的方向， 其主要有两个值， 默认值为 normal， 如果设置为normal时， 动画的每次循环都是向前播放； 另一个值是alternate，它的作用是，动画播放为偶数次则向前播放，为奇数次则向反方向播放。 例如一个弹跳动画中， 可以为落下的球提供关键帧， 然后将animation-direction取值为alternate来控制播放动画的每秒中反转它。

animation-play-state 设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态， 其基本语法如右所示： animation-play-state: running | paused [, running | paused]* 主要有两个值： running 和paused。 其中running为默认值， 主要作用类似于音乐播放器， 可以通过paused将正在播放的动画停下来， 也可以通过running将暂停的动画重新播放， 这里的重新播放不一定是从元素动画的开始播放， 也可能是 从暂停的那个位置开始播放。 另外如果暂停了动画的播放， 元素的样式将回到最原始设置状态。

设置动画时间外属性 animation-fill-mode

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作，其基本语法如右所示： animation-fill-mode: none | forwards | backwards | both 主要有四个值：none、forwards、backwards和both。其默认值为none，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。当其取值为forwards时，动画在结束后继续应用最后关键帧的位置。当其取值为backwards时，会在向元素应用动画样式时迅速应用动画的初始帧。当其取值为both时，元素动画同时具有forwards和backwards效果。在默认情况之下，动画不会影响它的关键帧之外的 属性， 但使用animation-fill-mode属性， 可以修改动画的默认行为。简单地理解就是告诉动画在第一个关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画第一帧 上， 或者同时具有这两个效果。