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: 要绑定的动画名称 动画的完成时间 速度曲线 延迟开始时间 播放次数;
                    1,要绑定的动画名称:必须有
                    2,动画的完成时间:必须有,s,ms
                    3,速度曲线:
                        linear:匀速
                        ease:慢,快,慢(默认值)
                        ease-in:慢速开始,后面越来越快
                        ease-out:快速开始,后面越来越慢
                        ease-in-out:慢速开始和结束的效果
                    4,延迟开始时间;(s,ms)
                    5,播放次数
             */
                /* animation: wyzx 5s 2; */
                
                /* 无限次数 */
                /* animation: wyzx 2s infinite; */
                
                /* 反向播放，必须有播放次数 */
                /* animation: wyzx 5s 2 alternate; */
                
                /* 无限次数反向播放 */
                /* animation: wyzx 5s infinite alternate; */
                
                /* 动画停在最后 */
                animation: wyzx 2s forwards;
            }
            
            /* @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;}
                50%{width: 300px;height: 300px;background-color: green;}
                80%{width: 300px;height: 300px;background-color: yellow;}
                100%{width: 200px;height: 200px;background-color: blue;}
            }
        </style>
    </head>
    <body>
        <!-- 
        动画:改变元素样式给元素添加动画
         -->
        <div id="box"></div>
    </body>
</html>

CSS 动画设置