0

Currently, I do not understand why my animations working only in one direction.

I've put the whole example here online.

Everything works fine if I use two keyframes:


.show {
  animation: showMe 0.4s;
}

.hide {
  opacity: 0;
  margin-top: -80px;
  animation: hideMe 0.3s;
}


@keyframes hideMe {
  0% {
    opacity: 1;
    margin-top: 20px;
  }
  100% {
    opacity: 0;
    margin-top: -80px;
  }
}

@keyframes showMe {
  0% {
    opacity: 0;
    margin-top: -80px;
  }
  100% {
    opacity: 1;
    margin-top: 20px;
  }
}

But I've thought it should also work with .show if I reuse hideMe in reverse direction, something like

.show {
  animation: hideMe 0.4s reverse;
}

instead of

.show {
  animation: showMe 0.4s;
}

Did I misunderstand the concept?

Lonely
  • 6,926
  • 8
  • 43
  • 81

1 Answers1

0

Read this answer from stackoverflow

Mile Mijatović
  • 2,535
  • 1
  • 22
  • 36
  • thank you, would you update the stackblitz, I've already tried that without success. Maybe I miss something else,.. – Lonely Mar 22 '20 at 18:10
  • Yes, but explain me in more detail what you want to achieve ? – Mile Mijatović Mar 22 '20 at 18:14
  • I would like to do the same (in the working example - see the link above) with one keyframes-name instead of two. I would like to reuse keyframes. – Lonely Mar 22 '20 at 18:15
  • Yes, I saw. When I click on button 'Toggle' , the blue box with text 'Play with me' is visible, when you click on the button again, the blue box disappears. Ok, I understand now – Mile Mijatović Mar 22 '20 at 18:18