KeyFrame Animation doesn't execute

Question

I'm taking a course, and I'm getting to the @keyframe level. I'm trying to test this code on CodePen.

But unfortunately it does not work, nothing happens as you can see. I opted for an error in my code since I did a test on my PC and still nothing.

My HTML :

<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);
  }
}

The weird thing is that on Jsfiddle it doesn't work either.

score 1 · Accepted Answer · answered Dec 27 '19 at 17:46

You're using the > CSS combinator in the CSS rules for your button. This works only if the progress bar is a child of the button, but it's not - it's a sibling of the button. You can make this work using the ~ sibling combinator:

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

KeyFrame Animation doesn't execute

1 Answers1