动画：animation

动画实现步骤

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画实现步骤</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        /* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
        animation: move 2s;
      }

      /* 一. 定义动画：让宽度从200变大到600 */
      @keyframes move {
        to {
          width: 600px;
          background-color: orange;
        }
      }

      .box2 {
        width: 200px;
        height: 100px;
        background-color: tomato;
        /* 2.调用动画 */
        animation: run 2s;
      }

      /* 二. 定义动画：200*100 到 500*300 到 800*500 */
      /* 百分比指的是动画总时长的占比 */
      /* running 不能作为动画名称，否则动画失效 */
      /* 1.定义动画 */
      @keyframes run {
        50% {
          width: 500px;
          height: 300px;
          background-color: pink;
        }
        100% {
          width: 800px;
          height: 500px;
          background-color: pu;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <br />
    <br />
    <div class="box2"></div>
  </body>
</html>

属性：

name 设置动画的名字
duration 设置动画的播放时间
timing-function 设置动画的速度曲线
- linear 匀速
- steps 逐帧动画
4.delay 设置动画延迟时间

5.iteration-count 设置动画播放次数

*infinite 无数

6.direction 设置动画方向

normal 默认先正后反 alternate 先反后正

7.fill-mode 设置延迟状态和结束状态

backword 设置延迟时间内元素变成第一帧的动画

forwords 设置动画结束后停留在最后一帧

8.play-state 动画播放还是暂停

播放默认值 running

暂停 paused