KeyFrame动画不执行

Question

我正在上一门课程，我要达到@keyframe的水平。我试图在CodePen上测试这段代码。

但不幸的是，它不起作用，什么事情都没有发生，正如你所看到的。我选择在我的代码错误，因为我做了一个测试在我的电脑，但仍然什么也没有。

My :

<div class='container'>
  <div class="btn">Click Here !</div>
  <div class='progress'>
    <div class="progress__bar"></div>
  </div>
</div>

My SCSS :

.btn {
  background-color:pink;
  width:20%;
  padding:10px;
  color:#FFFFFF;
  text-align:center;
  margin:0 auto;
  cursor:pointer;
  margin-bottom:2rem;
  &:active {
    & > .progress__bar {
      animation:progress-bar 1000ms;
    }
  }
}

.progress {
  width:100%;
  height:25px;
  border:1px solid #000000;
}

.progress__bar {
  background-color:green;
  width:100%;
  height:20px;
  margin-top:2px;
  transform:scaleX(0);
}

@keyframes progress-bar {
  0% {
    transform:scaleX(0);
  } 
  100% {
    transform:scaleX(1);
  }
}

奇怪的是，在Jsfiddle上它也不起作用。

Answer 1

在按钮的CSS规则中使用> combinator。只有当进度条是按钮的子级时才能工作，但它不是--它是按钮的同级。您可以使用~兄弟级组合器来完成此任务：

&:active {
  & ~ .progress .progress__bar {
    animation:progress-bar 1000ms;
  }
}