此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
animation-fill-mode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
CSS 属性animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。
尝试一下
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> <div>Animation <span></span></div> <div>Select a mode to start!</div></section>#example-element { background-color: #1766aa; color: white; margin: auto; margin-left: 0; border: 5px solid #333; width: 150px; height: 150px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column;}#playstatus { 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%; }}"use strict";window.addEventListener("load", () => { const el = document.getElementById("example-element"); const status = document.getElementById("playstatus"); 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;值
none当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
forwards目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于
animation-direction和animation-iteration-count的值：animation-directionanimation-iteration-countlast keyframe encountered normaleven or odd 100%ortoreverseeven or odd 0%orfromalternateeven 0%orfromalternateodd 100%ortoalternate-reverseeven 100%ortoalternate-reverseodd 0%orfrombackwards动画将在应用于目标时立即应用第一个关键帧中定义的值，并在
animation-delay期间保留此值。第一个关键帧取决于animation-direction的值：animation-directionfirst relevant keyframe normaloralternate0%orfromreverseoralternate-reverse100%ortoboth动画将遵循
forwards和backwards的规则，从而在两个方向上扩展动画属性。
备注：当你在animation-*属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给animation-name 属性中指定的动画。有关更多信息，请参阅设置多个动画属性值。
正式语法
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> <div>This grows and stays big.</div> <div>This just grows.</div></div>CSS
css
.demo { border-top: 100px solid #ccc; height: 300px;}@keyframes grow { 0% { font-size: 0; } 100% { font-size: 40px; }}.demo:hover .grows { animation-name: grow; animation-duration: 3s;}.demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards;}更多示例请查看CSS 动画 。
规范
| Specification |
|---|
| CSS Animations Level 1 # animation-fill-mode |
浏览器兼容性
参见
- Using CSS animations
- JavaScript
AnimationEventAPI