CSS - animation-name 属性

CSS animation-name 属性为定义元素动画的@keyframes提供名称。这些规则以逗号分隔的序列形式列出，用于描述动画行为。

语法


animation-name: keyframename|none|initial|inherit;

属性值

值	描述
keyframes	这指定了要应用于选择器的关键帧的名称
none	这指定不会有任何动画，并且是默认值。
initial	这会将属性设置为其初始值。
inherit	这将继承父元素的属性。

CSS animation-name 属性示例

下面列出的示例将说明具有不同值的 animation-name 属性。

带有关键帧的动画名称

在示例中，已经创建了一个描述动画的关键帧，名称为 slide，它与 .box 类链接，该类使用这些规则来制作盒子的动画。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 @keyframes slide {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: translateX(300px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 	 	 .box {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 background-color: teal;
	 	 	 	 	 	 animation-name: slide;
	 	 	 	 	 	 /* Assigning the animation name */
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-direction: alternate;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Name Property</h2>
	 	 <div class="box"></div>
</body>

</html>

none 的动画名称

当动画名称设置为 none 时，不会发生任何动画。在此示例中，动画名称已设置为 none，因此该框是静态的。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .box {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 background-color: teal;
	 	 	 	 	 	 animation-name: none;
	 	 	 	 	 	 /* Assigning the animation name */
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-direction: alternate;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Name Property</h2>
	 	 <div class="box"></div>
</body>

</html>

支持的浏览器

属性
animation-name	43.0	10.0	16.0	9.0	30.0

打印本页