CSS3 animation动画属性

本章节目录:

如何创建动画。

@keyframes：创建动画（关键帧）。

animation：复合属性。所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name：规定动画名称。动画名称由 @keyframes 所定义。

animation-duration：规定动画完成一个周期所花费的时间，秒或者毫秒。

animation-timing-function：规定动画的速度曲线。

animation-delay：规定动画的延迟时间（开始前的等待时间），秒或者毫秒。

animation-iteration-count：规定动画播放的次数。

animation-direction：规定动画是否在下一周期逆向播放。

animation-play-state：设置动画的状态（运行或暂停）。

animation-fill-mode：规定动画开始之前或完成之后的状态。

 

 

 

创建动画

如需在 CSS3 中创建动画，需要用到 @keyframes（关键帧）规则。

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

注释：您必须规定动画的名称和时长。如果忽略时长，则动画不会播放，因为默认值是 0。

实例：div {animation: myAnimation 5s;}

 

 

@keyframes 关键帧：

通过 @keyframes 规则，您能够创建动画。

创建 CSS 动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，能够多次改变这套 CSS 样式。

以百分比来规定样式改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画开始时间，100% 是动画结束时间。

为了获得最佳的浏览器支持，应该始终使用 0% 和 100% 选择器。

 

语法：@keyframes animation-name {keyframes-selector {css-styles;}}

 

属性值	描述
animation-name	必需。定义动画的名称。
keyframes-selector	必需。动画总时长的百分比。 合法的值： .0%-100% .from（与 0% 相同） .to（与 100% 相同）

 

 

animation：

简写属性，用于设置六个动画属性：

• animation-name：规定需要绑定到选择器的 @keyframes 名称。
• animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function：规定动画的速度曲线。
• animation-delay：规定在动画开始之前的延迟。
• animation-iteration-count：规定动画应该播放的次数。
• animation-direction：规定是否应该轮流反向播放动画。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

 

语法：animation: name duration timing-function delay iteration-count direction;

 

默认值："none 0 ease 1 normal"。

 

 

animation-name：

规定需要绑定到选择器的 @keyframes 名称。

属性值	描述
keyframename	规定需要绑定到选择器的 @keyframes 名称。
none	默认值。规定无动画效果。

 

 

animation-duration：

定义动画完成一个周期所需要的时间，以秒或毫秒计。

属性值	描述
time	规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。
none	默认值。规定无动画效果。

 

 

animation-name：

规定需要绑定到选择器的 @keyframes 名称。

属性值	描述
keyframename	规定需要绑定到选择器的 @keyframes 名称。

 

 

animation-timing-function：

规定动画的速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线，您能够在该函数中使用自己的值，也可以使用预定义的值。

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

 

 

animation-delay：

定义动画在开始前的等待时间，以秒或毫秒计。

提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进图动画。

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

 

 

animation-iteration-count：

规定动画的播放次数。

属性值	描述
number	一个数字，定义应该播放多少次动画。
infinite	指定动画应该播放无限次。

 

 

animation-direction：

规定动画的是否在下一周期逆向播放。

属性值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次正向播放，在偶数次逆向播放。
alternate-reverse	动画在奇数次逆向播放，在偶数次正向播放。
initial	设置为默认值。

 

 

animation-play-state：

规定设置动画的状态（运行或暂停）。

属性值	描述
paused	暂停动画。
running	运行动画。

 

 

animation-fill-mode：

规定动画开始之前和完成之后的状态。

属性值	描述
none	不改变默认状态。
forwards	动画完成后，保持最后一帧的样式。
backwards	动画开始之前，保持第一帧的样式。
both	动画开始之前，保持第一帧的样式。并且，动画完成后，保持最后一帧的样式。