animation-play-state 属性——动画示例

/* Single animation */ 
animation-play-state: running; a
nimation-play-state: paused; 

/* Multiple animations */ 
animation-play-state: paused, running, running; 

/* Global values */ 
animation-play-state: inherited; 
animation-play-state: initial; 
animation-play-state: unset;

/* HTML */
<div class="box"> 
    <div class="container-box"> 
        <div class="el top"></div> 
        <div class="el right"></div> 
        <div class="el left"></div> 
        <div class="el bottom"></div> 
     </div> 
 </div>    
 
/* CSS */
@keyframes top { 
15% {    
    transform: translate(0, 0) rotate(0);} 
60% {    
    transform: translate(-30px, -30px) rotate(20deg);} 
100% {    
    transform: translate(0, 0) rotate(90deg); } } 
@keyframes right { 
15% {     
    transform: translate(0, 0) rotate(0);} 
60% {     
    transform: translate(30px, -30px) rotate(-20deg); } 
100% {     
    transform: translate(0, 0) rotate(-90deg);} } 
@keyframes left { 
15% {    
    transform: translate(0, 0) rotate(0);} 
60% {    
    transform: translate(-30px, 30px) rotate(-20deg);} 
100% {   
     transform: translate(0, 0) rotate(-90deg);} } 
@keyframes bottom { 
15% {    
    transform: translate(0, 0) rotate(0);} 
60% {     
    transform: translate(30px, 30px) rotate(20deg);} 
100% {    
    transform: translate(0, 0) rotate(90deg);} } 
.box { 
    position: relative; 
    width:200px; 
    height:100px; } 
.box .container-box { 
    position: absolute; 
    background: #b2dbfb; 
    width: 60px; 
    height: 60px; 
    left: 50%; 
    margin-left: -30px; 
    top: 50%; 
    margin-top: -30px; 
    transform: rotate(45deg); 
    cursor: pointer; } 
.box .container-box:hover .el { 
    animation-play-state: running; } 
.box .container-box .el { 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    background: #2196F3; 
    margin: -3px; 
    border: 2px solid #2196F3; 
    border-radius: 2px; } 
.box .container-box .top { 
    animation: top 1s linear infinite; 
    animation-play-state: paused; } 
.box .container-box .right { 
    animation: right 1s linear infinite; 
    animation-play-state: paused; } 
.box .container-box .left { 
    animation: left 1s linear infinite; 
    animation-play-state: paused; } 
.box .container-box .bottom { 
    animation: bottom 1s linear infinite; 
    animation-play-state: paused; }