CSS基础 动画相关属性

1.定义动画
 1.1 两个个动画的定义方法
    @keyframes 动画名称{
         from{}
         to {}
     }

使用
     html代码

    <div class="box"></div>

    css代码：
     
 <style>
        /* 定义动画 */
        @keyframes change {
            from{width: 200px;}
            to{width: 400px;}
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: red;
            animation: change 1s;
        }
    </style>

  
 1.2 多个动画的定义方法 (这里的百分比，是调用时候总时长的百分比)
    @keyframes 动画名称{
         0%{}
         10%{}
         15%{}
         100%{}
       }

 <style>
     
        @keyframes change {
            0%{
                width: 200px;
            }
            20%{
                width: 400px;
                height: 200;
            }
            100%{
                width: 600px;
                height: 600px;
            }
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: red;
            animation: change 1s; /*调用动画 change为动画的名字*/
        }

2.使用动画

  2.1连写格式
  animation:动画名称 动画花费时长 速度曲线(liner匀速/steps(3)分三段处理) 延迟时间  重复次数(可以无限循环用infinite)  双向操作有进有出(alternate)  动画结束时的状态(backwards最初状态/forwards结束状态)
注意：1.值不分先后顺序，如果延时和花费时间同时出现，顺序以先花费时间后延迟时间;
     2.使用结束时的状态的时候，不能使用重复次数和方向操作值，否者将会受到影响;
     3.动画名称和时长必须有，否者无效;
 
  2.2拆分写法