animation-fill-mode
尝试一下
语法
/* 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-direction
animation-iteration-count
last keyframe encountered normal
even or odd 100%
orto
reverse
even or odd 0%
orfrom
alternate
even 0%
orfrom
alternate
odd 100%
orto
alternate-reverse
even 100%
orto
alternate-reverse
odd 0%
orfrom
backwards
- 动画将在应用于目标时立即应用第一个关键帧中定义的值,并在
animation-delay
期间保留此值。第一个关键帧取决于animation-direction
的值:animation-direction
first relevant keyframe normal
oralternate
0%
orfrom
reverse
oralternate-reverse
100%
orto
both
- 动画将遵循
forwards
和backwards
的规则,从而在两个方向上扩展动画属性。
注意:当您在animation-*
属性上指定多个以逗号分隔的值时,它们将根据值的数量以不同的方式分配给 animation-name
属性中指定的动画。有关更多信息,请参阅设置多个动画属性值。
正式语法
示例
您可以在以下示例中看到 animation-fill-mode
的效果。它演示了如何对于运行无限时间的动画,可以使其保持最终状态而不是恢复到原始状态(这是默认状态)。
HTML
<p>Move your mouse over the gray box!</p>
<div class="demo">
<div class="growsandstays">This grows and stays big.</div>
<div class="grows">This just grows.</div>
</div>
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 | Status | Comment |
---|---|---|
CSS Animations Level 1 animation-fill-mode |
Working Draft | Initial definition. |
浏览器兼容性
BCD tables only load in the browser
另见
- Using CSS animations
- JavaScript
AnimationEvent
API