首页 > 其他分享> > css动画 animation 关键帧 @keyframes

css动画 animation 关键帧 @keyframes

2022-03-04 20:33:33 作者：互联网

动画

定义动画

@keyframes 动画名称 {
form{} 初始状态，如果和盒子状态相同可省略 form{} === 0%{}
结束状态to{} ===100%{}
}

@keyframes move {
      0% {
        transform: translate(0);
      }

      100% {
        transform: translate(1000px);
      }

    }

调用动画

animation:动画名称动画持续时间速度曲线延迟时间重复次数动画方向执行完毕时状态
- 速度曲线：linear 匀速补间动画
- 速度曲线：steps(数值) 逐帧动画
- 重复次数：infinite 无限播放
- 动画方向：alternate 交替播放
- 执行完毕时状态：forwards 停止在结束状态，不能和infinite结合使用，否则失效
animation-name:动画名称，必须
animation-duration:动画时长，必须
animation-timing-function:速率曲线： linear匀速
animation-interation-count:动画次数，infinite

<!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;
      /* 动画名称 */
      /* animation-name: move; */
      /* 动画持续市场 */
      /* animation-duration: 2s; */
      /* 速度曲线 */
      /* animation-timing-function: linear; */
      /* 重复次数 */
      /* animation-iteration-count: infinite; */
      /* 延迟时间 */
      /* animation-delay: 2s; */
      /* 动画执行方向 */
      /* animation-direction: alternate; */
      /* 动画执行完毕时状态 */
      /* animation-fill-mode: forwards; */
      /* animation:动画名称 动画持续时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态 */
      animation: move 2s linear infinite;
    }

    .box:hover {
      /* 鼠标移入时暂停动画 */
      animation-play-state: paused;
    }

    @keyframes move {
      0% {
        transform: translate(0);
      }

      100% {
        transform: translate(1000px);
      }

    }
  </style>
</head>

<body>
  <div class="box"></div>
  <br />
  <br />
  <div class="box2"></div>
</body>

</html>

标签：动画,move,transform,keyframes,animation,infinite,css
来源： https://www.cnblogs.com/linaibo/p/15965981.html