前端小林

導(dǎo)航

公告

css動(dòng)畫(huà) animation 關(guān)鍵幀 @keyframes

動(dòng)畫(huà)

定義動(dòng)畫(huà)

@keyframes 動(dòng)畫(huà)名稱(chēng) {
form{} 初始狀態(tài)，如果和盒子狀態(tài)相同可省略 form{} === 0%{}
結(jié)束狀態(tài)to{} ===100%{}
}

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

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

    }

調(diào)用動(dòng)畫(huà)

animation:動(dòng)畫(huà)名稱(chēng) 動(dòng)畫(huà)持續(xù)時(shí)間速度曲線(xiàn) 延遲時(shí)間重復(fù)次數(shù) 動(dòng)畫(huà)方向執(zhí)行完畢時(shí)狀態(tài)
- 速度曲線(xiàn)：linear 勻速補(bǔ)間動(dòng)畫(huà)
- 速度曲線(xiàn)：steps(數(shù)值) 逐幀動(dòng)畫(huà)
- 重復(fù)次數(shù)：infinite 無(wú)限播放
- 動(dòng)畫(huà)方向：alternate 交替播放
- 執(zhí)行完畢時(shí)狀態(tài)：forwards 停止在結(jié)束狀態(tài)，不能和infinite結(jié)合使用，否則失效
animation-name:動(dòng)畫(huà)名稱(chēng)，必須
animation-duration:動(dòng)畫(huà)時(shí)長(zhǎng)，必須
animation-timing-function:速率曲線(xiàn)： linear勻速
animation-interation-count:動(dòng)畫(huà)次數(shù)，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>動(dòng)畫(huà)實(shí)現(xiàn)步驟</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      /* 動(dòng)畫(huà)名稱(chēng) */
      /* animation-name: move; */
      /* 動(dòng)畫(huà)持續(xù)市場(chǎng) */
      /* animation-duration: 2s; */
      /* 速度曲線(xiàn) */
      /* animation-timing-function: linear; */
      /* 重復(fù)次數(shù) */
      /* animation-iteration-count: infinite; */
      /* 延遲時(shí)間 */
      /* animation-delay: 2s; */
      /* 動(dòng)畫(huà)執(zhí)行方向 */
      /* animation-direction: alternate; */
      /* 動(dòng)畫(huà)執(zhí)行完畢時(shí)狀態(tài) */
      /* animation-fill-mode: forwards; */
      /* animation:動(dòng)畫(huà)名稱(chēng) 動(dòng)畫(huà)持續(xù)時(shí)間 速度曲線(xiàn) 延遲時(shí)間 重復(fù)次數(shù) 動(dòng)畫(huà)方向 執(zhí)行完畢時(shí)狀態(tài) */
      animation: move 2s linear infinite;
    }

    .box:hover {
      /* 鼠標(biāo)移入時(shí)暫停動(dòng)畫(huà) */
      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>

posted on 2022-03-04 20:20 前端小林閱讀(214) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部