@keyframes属性解释

以下是小编针对“@keyframes属性解释

”给大家整理的相关资料，欢迎大家查阅和参考！

品牌型号：联想Geek Pro 系统：Windows 10 软件版本：

@keyframes属性是css动画功能中的关键帧，将指定时间段内的动画划分的更为精细一些。

CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式 、修饰方式以及其他页面效果。

CSS @keyframes规则

@keyframes规则用于指定动画规则，定义一个CSS动画的一个周期的行为；可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。动画是使用可变的CSS样式创建的；在动画期间，CSS属性可以多次更改。

定义动画，必须从@keyframes规则开始。@keyframe规则由关键字“@keyframes”组成，后跟一个标识符，给出动画的名称（将使用animation-name引用），然后是一组样式规则（用大括号分隔）。然后，通过使用标识符作为“animation-name”属性的值，将动画应用于元素。

语法：

animation-name： 这是必需的，它定义动画名称。

keyframes-selector： 定义动画的百分比，它介于0％到100％之间。一个动画可以包含许多选择器。

在大括号内，定义关键帧或路径点，这些关键帧或路径点在动画期间的某些点上指定要设置动画的属性的值。这允许您在动画序列中控制中间步骤。例如，一个简单的动画@keyframe可能如下所示：

0%”和“100%”是关键帧选择器，每个都定义了关键帧规则。关键帧规则的关键帧声明块由属性和值组成。

还可以使用选择器关键字from和to，而不是分别使用0%和100%，因为它们是等价的。

关键帧选择器由一个或多个逗号分隔的百分比值或from和to关键字组成。注意，百分比单位说明符必须用于百分比值。因此，' 0 '是一个无效的关键帧选择器。

注意：为了获得浏览器的最佳支持，请始终指定0％和100％选择器。

示例1：

效果图：

示例2：

效果图：

更多 web前端开发 知识，请查阅 HTML中文网 ！！