时间戳

首页 > 解决方案 > 使css动画无限运行

html - 使css动画无限运行

问题描述

有这个 html/css 片段：

.triangle-four {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid rgb(20, 97, 27);
  margin-top: -120px;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
<div class="triangle-four"></div>

我想让它无限运行并尝试这样做：

 animation-duration: 4s infinite;

它不起作用，即使认为这是w3schools上推荐的操作，动画也不再起作用。

有任何想法吗？

标签： htmlcssanimation

解决方案

我删除animation-name: example; animation-duration: 4s;并添加animation: example 5s infinite;它，它将解决您的问题。

另一个解决方案只是添加它而不删除任何东西：

animation-iteration-count: infinite;


.triangle-four {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid rgb(20, 97, 27);
  margin-top: -120px;
  animation: example 5s infinite;
}

@keyframes example {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
  }
<div class="triangle-four"></div>

推荐阅读