0

I'm trying to make an animation run on a div in its normal direction when a checkbox is checked but in reverse when it's not. I remember reading yesterday something about only being able to animate something one time, but I can't remember exactly what was said.

Here is the code below: 

@keyframes move {
 0% {
  bottom: 0%;
  opacity: 0;
 }

 80% {
  bottom: 53%;
  opacity: .8;
 }

 100% {
  bottom: 50%;
  opacity: 1;
 }

}

.containers {
 width: 100px;
 height: 100px;
 position: absolute;
 border-radius: 100%;
 animation-duration: .5s;
 animation-iteration-count: 1;
 animation-fill-mode: forwards;
}

#smoothCheck:checked ~ #container_1 {
 bottom: 0%;
 opacity: 0;
 background-color: #38D1C2;
 animation-name: move;
}
<input type="checkbox" id="smoothCheck"> I make a smooth entrance

<div id="container_1" class="containers">
  </div>

Every time I try "smoothCheck:not(checked) .... to try to run the animation in reverse whenever the checkbox is unchecked, it just overrides it.

Is there any way for me to achieve this?

Kody R.
  • 2,430
  • 5
  • 22
  • 42
  • So you’re looking for [`animation-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) … or what? – CBroe Dec 14 '15 at 15:50
  • @CBroe I already know animation direction, but if I say smoothCheck:not(checked) and add the "move" animation just in reverse, it overrides the first one and only performs the animation in reverse – Kody R. Dec 14 '15 at 15:55
  • 2
    @Harry Yepp that is it! Thanks for adding that - it's not the article I originally read, but I couldn't find anything else that was related. – Kody R. Dec 14 '15 at 15:59

0 Answers0