CSS - @keyframes 属性

CSS 中的 @keyframes at rule 用于定义动画或过渡的一组关键帧。关键帧是一种指定元素的样式在动画过程中如何变化的方法。您可以定义动画的开始状态和结束状态之间的中间步骤或关键帧。

语法


@keyframes = @keyframes <keyframes-name> { <rule-list> }

可能的值

CSS 中的 @keyframes at-rule 可以具有以下值：

<custom-ident>：确定关键帧列表的名称。此名称必须与 CSS 语法中的标识符生成匹配。
from：确定 0% 的起始偏移量。
to：确定 100% 的结束偏移量。
<percentage>：确定动画序列中指定关键帧应出现的时间百分比。

概述

为了使用关键帧，您需要创建一个@keyframe规则，并指定一个名称，该名称将由 animation-name 属性使用。
每个@keyframe规则都由一个关键帧选择器的样式列表组成，当关键帧发生时，该选择器通过动画指定百分比值。
它还列出了包含特定关键帧样式的块。
在传递百分比值时，您可以按任何顺序使用它们。系统按照它们应发生的顺序处理它们。
带有 CSS 对象模型接口 CSSKeyframesRule 的 @keyframes at-rule 可以通过 JavaScript 访问。
当没有明确指定动画的开始和结束状态时，浏览器将使用现有的开始/结束状态元素样式。这用于元素从其初始状态到其返回的动画。无法使用关键帧进行动画处理的属性将被忽略，但支持的属性将进行动画处理。
如果一个公用名称存在多个关键帧集，则将考虑解析器指定并遇到的最后一个关键帧集。由于@keyframes规则不会级联，因此动画永远不会派生自多个关键帧规则集。
如果给定的动画时间偏移量重复，则@keyframes规则中指定百分比值的所有关键帧都将用于该帧。当多个关键帧指定相同的百分比值时，将在@keyframes规则内进行级联。
将计算或插值某些关键帧中遗漏的属性，并从动画中避免那些无法插值的属性。
当多次声明关键帧时，如果未在每个关键帧中指定所有受影响的属性，则将考虑这些关键帧中的所有指定值。
带有！important 限定符的关键帧中的所有声明都将被忽略。

只有 Firefox 14 才支持级联关键帧。

例

下面是 @keyframes at-rule 的示例。


<html>	
<head>	
<style>	
	 	div {	
	 	 	 width: 100px;	
	 	 	 height: 100px;	
	 	 	 margin: 100px;	
	 	 	 background-color: blue;	
	 	 	 animation: sample-box 8s infinite;	
	 	}	

	 	@keyframes sample-box {	
	 	 	 0% {	
	 	 	 background-color: red;	
	 	 	 }	

	 	 	 25% {	
	 	 	 	 	background-color: yellow;	
	 	 	 }	

	 	 	 50% {	
	 	 	 	 	background-color: lightgreen;	
	 	 	 }	

	 	 	 75% {	
	 	 	 	 	background-color: royalblue;	
	 	 	 }	

	 	 	 100% {	
	 	 	 	 	background-color: purple;	
	 	 	 }	
	 	}	
</style>	
</head>	
<body>	
	 	<div></div>	
</body>	
</html>

在上面的例子中：

@keyframes规则由名称 sample-box 定义，并指定了某些样式。
关键帧名称将传递给 div 元素上的 animation 属性，该属性会考虑该关键帧规则下提到的样式对元素进行动画处理。
sample-box 是动画的名称，8s 是动画的持续时间，infinite 表示动画无限重复。

这是 @keyframes at 规则的另一个示例。


<html>
<head>
<style>	
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background: green;
	 	 	 position: relative;
	 	 	 animation: sample-rule 5s infinite;
	 	}

	 	@keyframes sample-rule {
	 	 	 from {left: 0px;}
	 	 	 50% {left: 50px;} /* ignored */
	 	 	 to {left: 100px;}
	 	}
</style>
</head>
<body>
	 	<h1>@keyframes At-Rule</h1>
	 	<p>Check for the animation</p>
	 	<div></div>
</body>
</html>

在上面的例子中：

@keyframes at rule 由名称 sample-rule 定义，并指定了某些样式。
关键帧名称（sample-rule）被传递给 div 元素上的 animation 属性，该属性为元素添加动画并从左向右移动框。
sample-rule 是动画的名称，5s 是动画的持续时间，infinite 表示动画无限重复。

本页