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