试一试
animation-fill-mode: none;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
animation-fill-mode: backwards;
animation-delay: 1s;
animation-fill-mode: both;
animation-delay: 1s;
<section class="flex-column" id="default-example">
<div>Animation <span id="play-status"></span></div>
<div id="example-element">Select a mode to start!</div>
</section>
#example-element {
background-color: #1766aa;
color: white;
margin: auto;
margin-left: 0;
border: 5px solid #333333;
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#play-status {
font-weight: bold;
}
.animating {
animation: slide 1s ease-in 1;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
const el = document.getElementById("example-element");
const status = document.getElementById("play-status");
function update() {
status.textContent = "delaying";
el.className = "";
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
el.className = "animating";
});
});
}
el.addEventListener("animationstart", () => {
status.textContent = "playing";
});
el.addEventListener("animationend", () => {
status.textContent = "finished";
});
const observer = new MutationObserver(() => {
update();
});
observer.observe(el, {
attributes: true,
attributeFilter: ["style"],
});
update();
通常，为了图方便，可以使用简写属性 animation 一次性设置所有动画属性。
语法
css
/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
/* Global values */
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: revert;
animation-fill-mode: revert-layer;
animation-fill-mode: unset;
值
none-
动画在未执行时不会对目标应用任何样式。元素将根据应用于它的其他 CSS 规则进行显示。这是默认值。
forwards-
目标将保留执行期间遇到的最后一个 关键帧 所设置的计算值。最后一个关键帧取决于
animation-direction和animation-iteration-count的值。animation-directionanimation-iteration-count遇到的最后一个关键帧 normal偶数或奇数 100%或to反向偶数或奇数 0%或from交替even 0%或from交替odd 100%或to交替反向even 100%或to交替反向odd 0%或from动画属性的行为如同包含在一组
will-change属性值中。如果动画期间创建了新的堆叠上下文，目标元素在动画结束后会保留该堆叠上下文。 backwards-
动画将根据第一个相关 关键帧 中定义的值进行应用，并在
animation-delay期间保持这些值。第一个相关关键帧取决于animation-direction的值。animation-direction第一个相关关键帧 normal或alternate0%或fromreverse或alternate-reverse100%或to both-
动画将同时遵循 forwards 和 backwards 的规则，从而在两个方向上扩展动画属性。
备注： 当你在一个 animation-* 属性上指定多个逗号分隔的值时，它们会按照 animation-name 出现的顺序应用于动画。对于动画数量和 animation-* 属性值不匹配的情况，请参见设置多个动画属性值。
注意： animation-fill-mode 在创建 CSS 滚动驱动动画 时与常规基于时间的动画具有相同的效果。
正式定义
正式语法
animation-fill-mode =
<single-animation-fill-mode>#
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
示例
设置填充模式
您可以在以下示例中看到 animation-fill-mode 的效果。它演示了如何使动画保持在最终状态，而不是恢复到原始状态（这是默认行为）。
HTML
html
<p>Move your mouse over the gray box!</p>
<div class="demo">
<div class="grows-and-stays">This grows and stays big.</div>
<div class="grows">This just grows.</div>
</div>
CSS
css
.demo {
border-top: 100px solid #cccccc;
height: 300px;
}
@keyframes grow {
0% {
font-size: 0;
}
100% {
font-size: 40px;
}
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
}
.demo:hover .grows-and-stays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
}
结果
有关更多示例，请参阅 CSS 动画。
规范
| 规范 |
|---|
| CSS 动画级别 1 # animation-fill-mode |
浏览器兼容性
加载中…