html - 如何在css中播放动画后更改按钮颜色

Question

我想在播放动画一段时间后更改按钮的颜色。我搜索并发现，它需要更改一个新框架。这是我的 CSS:

.header-button {
  font-size: 12px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
  color: #fbd3cc;
  text-decoration: none;
  font-weight: normal;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  display: inline;
  background: #026890;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

.animate-flicker {
  animation: fadeIn 0.5s infinite alternate;
  animation-iteration-count: 10;
  -moz-animation-name: changecolor;
}

@keyframes changecolor {
  {
    color: red;
  }
}

<button class="header-button animate-flicker">Menue
</button>

谁能告诉我如何在 css 中播放动画 5 次后更改按钮颜色

Answer 1

您需要制作两个动画:

• 在相同的关键帧

@keyframes fadeInNColor {
  from {
    opacity: 0;
  }
  to {
    color: red;
  }
}

• 或者从相同的规则调用它们中的每一个

  animation: fadeIn 0.5s infinite alternate, changecolor 0.5s  infinite alternate forwards;

.header-button {
  font-size: 12px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
  color: #fbd3cc;
  text-decoration: none;
  font-weight: normal;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  display: inline-block;
  background: #026890;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

.animate-flicker {
  animation: 
    fadeIn 0.5s infinite alternate, /* first animation*/
    changecolor 0.5s  infinite alternate forwards;/* second animation freezed */
  animation-iteration-count: 5;
}

@keyframes changecolor {
  to {
    color: red;
  }
}

<button class="header-button animate-flicker">Menue
</button>