css - 添加具有基本背景颜色的对象，然后延迟将其更改为其他颜色

Question

我有一个 ul。使用 javascript，我将 li 添加到其中。我需要添加带有背景色 #E4F3D6 的 li，然后 10 秒后更改为 #DDD 作为最终颜色。

我知道这可以通过动画和过渡延迟来实现，但我不知道如何实现。

我写了这个但是不能正常工作:

@-webkit-keyframes change-color {
    0% {
        background-color: #E4F3D6;
        /*-webkit-transition-delay: 5s;*/
    }
    100% { background-color: transparent; }
}
@-moz-keyframes change-color {
    0% {
        background-color: #E4F3D6;
        /*-moz-transition-delay: 5s;*/
    }
    100% { background-color: transparent; }
}
@keyframes change-color {
    0% {
        background-color: #E4F3D6;
        /*transition-delay: 5s;*/
    }
    100% { background-color: transparent; }
}

.test {
    height: 25px;
    background-color: #E4F3D6;
    -webkit-animation: change-color 2s ease;
    -moz-animation: change-color 2s ease;
    animation: change-color 2s ease;
}

这是一个演示:https://jsfiddle.net/junihh/a657pd6q/4/

谁能帮帮我

Answer 1

在 CSS 中为元素本身设置 transition-delay 属性:

.test {
  height: 25px;
  background-color: #E4F3D6;
  -webkit-animation: change-color 2s ease 5s forwards;
  -moz-animation: change-color 2s ease 5s forwards;
  animation: change-color 2s ease 5s forwards;
}

上面使用了 animation 属性的简写形式:

animation: <animation-name> <animation-duration> <animation-type> <animation-duration> <animation-fill-mode>

animation-delay 属性的作用正如其名称所暗示的那样，它将动画的开始延迟指定的值(此处为 5s，五秒)； animation-fill-mode 属性使动画的最终值在动画完成后保持不变:

document.getElementById('add').addEventListener('click', function() {
  var li = document.createElement('li');
  li.innerHTML = '<div class="test"></div>';
  document.getElementById('container').appendChild(li);
}, false);

* {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
#container {
  width: 200px;
  margin: 20px auto 0;
  padding: 15px;
  background-color: #FFF;
  border: solid 1px #DDD;
}
#container li {
  background-color: #DDD;
  margin-bottom: 4px;
}
#container li:last-child {
  margin-bottom: 0;
}
.button-box {
  margin: 20px auto 0;
  width: 100px;
}
#add {
  width: 100%;
  padding: 10px 0;
  background-color: #666;
  cursor: pointer;
  font-size: 14px;
  color: #FFF;
}
#add:active {
  background-color: #333;
}
@-webkit-keyframes change-color {
  0% {
    background-color: #E4F3D6;
  }
  100% {
    background-color: #F90;
  }
}
@-moz-keyframes change-color {
  0% {
    background-color: #E4F3D6;
  }
  100% {
    background-color: #F90;
  }
}
@keyframes change-color {
  0% {
    background-color: #E4F3D6;
  }
  100% {
    background-color: #F90;
  }
}
.test {
  height: 25px;
  background-color: #E4F3D6;
  -webkit-animation: change-color 2s ease 5s forwards;
  -moz-animation: change-color 2s ease 5s forwards;
  animation: change-color 2s ease 5s forwards;
}

<ul id="container">
  <!-- li's -->
</ul>

<div class="button-box">
  <button type="button" id="add">Add row</button>
</div>

JS Fiddle demo .

请注意，在演示中，我使用了 #f90 的最终颜色而不是 #ddd 只是为了使动画更明显(两者之间的区别开始和结束颜色，否则很容易错过)。