CSS动画

CSS动画： CSS动画是一种改变网页中各种元素的外观和行为的技术。它通过改变元素的运动或显示来控制元素。它由两部分组成，一部分包含描述元素动画的CSS属性，另一部分包含某些关键帧，这些关键帧指示元素的动画属性以及这些属性必须出现的特定时间间隔。

这个 @关键帧规则 : 关键帧是CSS动画工作的基础。它们定义动画在其整个持续时间的各个阶段的显示。例如：在下面的代码中，段落的颜色会随着时间而改变。完成率为0%时为红色，完成率为50%时为橙色，完成率为100%时为棕色。

例子： 本例描述了使用@keyframe规则的CSS动画。

输出：

动画属性： 下面给出了某些动画特性：

动画名称 : 它用于指定描述动画的@keyframes的名称。

animation-name: animation_name;

动画持续时间 : 它用于指定动画完成一个周期所需的持续时间。

例子： 本例使用动画持续时间属性描述CSS动画属性。

输出：

动画将如下所示：

动画计时功能 : 指定动画如何通过关键帧进行变换。它可以具有以下值：

• 轻松： 动画开始缓慢，然后快速，最后缓慢结束（这是默认设置）
• 线性的： 动画从头到尾以相同的速度播放
• 放松： 动画以缓慢的开始播放
• 放松： 动画以缓慢的结尾播放
• 轻松进出： 动画开始和结束缓慢。

例子： 本例使用动画计时功能属性描述CSS动画属性。

输出：

动画延迟 : 它用于指定动画开始时的延迟。

例子： 本例使用动画延迟属性描述CSS动画属性。

输出：

动画迭代计数 : 它用于指定动画将重复的次数。它可以指定为无限，无限期地重复动画。

例子： 此示例使用动画迭代计数属性描述CSS动画属性。

输出：

动画方向 : 指定动画的方向。它可以具有以下值：

• 正常： 动画向前播放。这是默认值。
• 相反： 动画以相反的方向播放，即向后播放。
• 备选方案： 动画先向前播放，然后向后播放。
• 交替反转： 动画先向后播放，然后向前播放。

例子： 此示例使用“动画方向”属性描述CSS动画属性。

输出：

动画填充模式 : 指定动画在执行前后应用的值。

• 无： 动画不会在执行元素之前或之后对其应用任何属性。这是默认值。
• 转发： 动画完成后，元素将保留与最后一个关键帧相同的动画属性。
• 向后的： 该元素将在动画开始之前获取第一个关键帧的属性。
• 两者： 动画将遵循向前和向后的规则，即在开始之前获得为初始关键帧定义的属性，并在动画完成后保留最后一个关键帧的值。

例子： 本示例使用动画填充模式属性描述CSS动画属性。

输出：

动画播放状态 : 这允许您播放/暂停动画。

动画速记属性： 这是一种暗示动画属性的简写方式，用于更快的代码。属性应按以下顺序排列：

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay]           [animation-iteration-count] [animation-direction] [animation-fill-mode]           [animation-play-state];

例如，通常动画代码如下所示：

例子： 本例使用动画播放状态属性描述CSS动画属性，而不使用动画速记属性。

输出：

简而言之，上述HTML代码可以写成：

例子： 此示例使用动画播放状态属性和动画速记属性描述CSS动画属性。

输出：

支持的浏览器：

• 谷歌Chrome 43.0
• 微软Edge 12.0
• Firefox 16.0
• Safari 9.0
• 歌剧30.0