CSS 动画播放和暂停

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            #box{
                width: 100px;height: 100px;background-color: red;
                margin: 100px auto;
                animation: wyzx 5s;
                animation-play-state: paused;
            }
            #box:hover{
                
                /* 规定动画播放还是暂停：paused暂停，running播放 */
                /* animation-play-state: paused; */
                animation-play-state: running;
            }
            
            /* @keyframes用于创建一个动画 */
            @keyframes wyzx{
                /* from动画开始元素样式 */
                /* from{
                    width: 100px;height: 100px;background-color: red;
                } */
                /* to动画结束元素样式 */
                /* to{
                    width: 200px;height: 200px;background-color: green;
                } */
                
                /* 百分比创建动画,动画完成时间的百分比 */
                0%{width: 100px;height: 100px;background-color: red;}
                30%{width: 300px;height: 300px;background-color: green;}
                100%{width: 200px;height: 200px;background-color: blue;}
            }
        </style>
    </head>
    <body>
        <!-- 
        动画:改变元素样式给元素添加动画
         -->
        <div id="box"></div>
    </body>
</html>