Thuộc tính animation-iteration-count

Thuộc tính animation-iteration-count thiết lập số lần lặp lại của animation. Theo mặc định animation chỉ lặp lại 1 lần và sau đó trở về trạng thái ban đầu. Thuộc tính của chúng ta, tuy nhiên, cho phép thiết lập một số lần lặp lại cụ thể hoặc thậm chí thiết lập lặp lại vô hạn.

Cú pháp

cssbộ chọn {
  animation-iteration-count: số nguyên hoặc số thập phân | infinite;
}

Giá trị

Giá trị mặc định: 1.

Ví dụ . Số lần lặp lại hữu hạn

Trong ví dụ này animation sẽ chỉ lặp lại 3 lần, sau đó trở về trạng thái ban đầu:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 3;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Ví dụ . Giá trị infinite

Và bây giờ animation sẽ lặp lại vô hạn:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Xem thêm