溫馨提示×

CSS動畫效果如何控制時間

css
小樊
81
2024-10-25 04:00:52
欄目: 編程語言

CSS 動畫的時間控制主要通過 animation-duration 屬性來實(shí)現(xiàn)，該屬性用于指定動畫完成所需的時間，其值通常以秒（s）或毫秒（ms）為單位。例如，以下代碼將使元素在 2 秒內(nèi)完成動畫：

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

除了 animation-duration，還可以使用 animation-delay 屬性來控制動畫開始之前的時間間隔，使用 animation-iteration-count 屬性來控制動畫的播放次數(shù)，使用 animation-timing-function 屬性來控制動畫時間變化的加速度曲線。

例如，以下代碼將使元素在等待 1 秒后開始動畫，并且無限次循環(huán)播放：

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

0 踩