html - @keyframes无法正常工作，我已经尝试了所有我能想到的

由于某些原因，@ keyframes规则对我不起作用，有人可以告诉我我要去哪里了。

我能想到的唯一解决方法是-webkit-，但这似乎完全没有帮助。

.keyframe {
  height: 15px;
  width: 50px;
  background-color: red;
  -webkit-transition: width 4s;
}

.keyframe:hover {
  width: 250px;
}

@-webkit-keyframes keyframe {
  0% {
    -webkit-background-color: red;
  }
  50% {
    -webkit-background-color: yellow;
  }
  70% {
    -webkit-background-color: blue;
  }
  100% {
    -webkit-background-color: green;
  }
}

<div class="keyframe"></div>

我期望颜色会随着条形图达到最大宽度而改变，但是，条形图根本不会改变颜色。

最佳答案

您需要指定将在:hover内部调用的动画

同样，将animation键添加到forwards属性，以使其在动画的结尾处停止（然后它不会恢复为红色）。 （我从CSS中删除了-webkit，因为我认为这确实没有必要）

我的提示还在于将keyframe的名称更改为指定动画功能的名称，例如change-bgColor或类似名称。

.keyframe {
  height: 15px;
  width: 50px;
  background-color: red;
  -webkit-transition: width 4s;
}

.keyframe:hover {
  width: 250px;
  animation: change-bgColor 4s linear forwards;
}

@keyframes change-bgColor {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  70% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

<div class="keyframe"></div>

关于html - @keyframes无法正常工作，我已经尝试了所有我能想到的，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57525572/