CSS - animation-fill-mode 属性

CSS animation-fill-mode 属性确定在执行 CSS 动画之前和之后应如何将样式应用于 CSS 动画的目标。

使用简写属性 animation 一次设置所有动画设置通常很方便。

可能的值

CSS 属性 animation-fill-mode 可以具有以下值之一：

none - 当动画不执行时，它不会对目标应用任何样式。相反，该元素将根据任何其他现有的 CSS 规则显示。此行为表示默认设置。

forwards - 在执行过程中检测到的最终关键帧设置的计算值将保留在目标上。animation-direction 和 animation-iteration-count 的值确定最终的关键帧：

动画方向	动画迭代计数	遇到的最后一个关键帧
normal	even or odd	100% or to
reverse	even or odd	0% or from
alternate	even	0% or from
alternate	odd	100% or to
alternate-reverse	even	100% or to
alternate-reverse	odd	0% or from

backwards - 一旦动画应用于目标，它将应用在第一个适当的关键帧中指定的值，并在动画延迟期间保持它们。animation-direction 值确定第一个合适的关键帧：

动画方向	第一个相关关键帧
normal or alternate	0% or from
reverse or alternate-reverse	100% or to

both - 动画将在前进和后退方向上都遵循规则，从而有效地扩展了两个方向的动画属性。

注：如果在 animation-* 属性上指定了多个逗号分隔的值，则这些值将按照动画名称s 出现的顺序应用于动画。

语法


animation-fill-mode = <single-animation-fill-mode>#	

<single-animation-fill-mode> = none | forwards | backwards | both;

适用于

所有 HTML 元素：：before 和：：after 伪元素。

CSS animation-fill-mode - 向后值

以下示例演示了 animation-fill-mode。

在给出的 CSS 示例中，animation-fill-mode 属性设置为向后。
当将鼠标悬停在 .animation-demo 元素上时，将触发增长动画。
它将圆圈放大 1 秒。animation-fill-mode： backwards 属性可确保在悬停状态结束时，元素在动画开始之前保持其初始状态。


<html>
<head>
<style>
	 	.animation-demo {
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 margin-left: 150px;
	 	 	 margin-top: 150px;
	 	 	 background-color: #2799db;
	 	 	 border-radius: 50%;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 color: white;
	 	 	 font-size: 20px;
	 	 	 transition: all 1s ease;
	 	}
	 	@keyframes grow {
	 	 	 0% {
	 	 	 transform: scale(1);
	 	 	 }
	 	 	 100% {
	 	 	 transform: scale(1.5);
	 	 	 }
	 	}
	 	.animation-demo:hover {
	 	 	 animation-name: grow;
	 	 	 animation-duration: 1s;
	 	 	 animation-fill-mode: backwards;
	 	}
</style>
</head>
<body>
<div class="animation-demo">Hover over this!</div>
</body>
</html>

CSS animation-fill-mode - 转发值

以下示例演示了 animation-fill-mode。

在此示例中，animation-fill-mode： forwards; 应用于初始动画，以确保元素在动画完成后保持其最终状态（完全可见）。
当鼠标指针悬停在元素上时，动画会反转，因为在使用 animation-fill-mode： forwards; 悬停时分配了一个单独的动画，保持最终状态，以便即使在悬停动画完成后，元素仍保持在其最终位置。
此属性在动画之后或悬停动画之后保留元素的视觉状态，从而保持事物看起来相同，而不会回到以前的样子。


<html>
<head>
<style>
	 	@keyframes slidein {
	 	 	 from {
	 	 	 	 	 	 margin-left: 100%;
	 	 	 	 	 	 width: 300%;
	 	 	 }
	 	 	 to {
	 	 	 	 	 	 margin-left: 0%;
	 	 	 	 	 	 width: 100%;
	 	 	 }
	 	 	 }	
	 	 	 @keyframes slideback {
	 	 	 from {
	 	 	 	 	 	 margin-left: 0%;
	 	 	 	 	 	 width: 100%;
	 	 	 }
	 	 	 to {
	 	 	 	 	 	 margin-left: 100%;
	 	 	 	 	 	 width: 300%;
	 	 	 }
	 	}
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: red;
	 	 	 position: relative;
	 	 	 animation-name: slidein;
	 	 	 animation-duration: 6s;
	 	 	 animation-fill-mode: forwards;
	 	 	 font-size: 20px;
	 	 	 color: white;
	 	}
	 	div:hover {
	 	 	 animation-name: slideback;
	 	 	 animation-duration: 6s;
	 	 	 animation-fill-mode: forwards;
	 	}
</style>
</head>
<body>
<div>Hover Over This!</div>
</body>
</html>

打印本页