animation-fill-mode
CSS 属性 animation-fill-mode
设置 CSS 动画在执行之前和之后如何将样式应用于其目标。
尝试一下
使用简写属性 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-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
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
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 |
浏览器兼容性
BCD tables only load in the browser
参见
- Using CSS animations
- JavaScript
AnimationEvent
API