用途
animation-fill-mode 规定对象动画时间之外的状态。
语法
代码语言：javascript复制animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both /* 可以应用多个参数，这个时候使用逗号隔开 */
/* 各个参数应用于与次序相对应的动画名 */
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none值
值 | 描述 |
|---|---|
none | 动画执行前后不改变任何样式。 |
forwards | 动画保持最后一帧的样式。 |
backwards | 动画采用第一帧的样式。 |
both | 动画将会执行forwards和backwards执行的动作。 |
例子
代码语言：javascript复制/* HTML */
<div class="box">
<div class="module">
<p><code>none</code></p>
<div class="wrapper">
<div class="element element-1"></div>
</div>
</div>
<div class="module">
<p><code>forwards</code></p>
<div class="wrapper">
<div class="element element-2"></div>
</div>
</div>
<div class="module">
<p><code>backwards</code></p>
<div class="wrapper">
<div class="element element-3"></div>
</div>
</div>
<div class="module">
<p><code>both</code></p>
<div class="wrapper">
<div class="element element-4"></div>
</div>
</div>
</div>
/* CSS */
.box {
margin: 10px auto;
max-width: 800px;
background-color:
white; padding: 5px 20px;
border: 1px solid #aaa; }
.module {
width: 150px;
display: inline-block; }
.wrapper {
width: 80px;
height: 80px;
border-radius: 5px;
border: 1px dashed grey;
display: inline-block; }
.element {
width: 80px;
height: 80px;
border-radius: 5px;
background-color: purple;
transform-origin: bottom left; }
.box:hover .element {
animation-name: rotate;
animation-duration: 1s;
animation-timing-function: cubic-bezier(.18, 1.03, .5, 1.62); }
.element-2 {
animation-fill-mode: forwards; }
.element-3 {
animation-delay: 1s;
animation-fill-mode: backwards; }
.element-4 {
animation-delay: 1s;
animation-fill-mode: both; }
@keyframes rotate {
0% {
background-color: orange;
transform: rotate(0deg); }
100% {
transform: rotate(90deg);
background-color: #0088CC; }
}执行结果
