animation-fill-mode

animation-fill-mode规定对象动画时间之外的状态。

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

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;
  }
}

执行结果