Question

由于某些原因，@ 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>

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

Answer 1

您需要指定将在: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>

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

1 个答案: