0

I have a div, which I fade-in (right to left) with css:

CSS:
#mydiv {
   animation: slideIn 1s ease 0s 1;
}

@keyframes slideIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

When I click on a close-button, it should fade-out the same way:

JS:
$("#close").on('click', function(e) {
  $("#mydiv").css({ 'animation': 'slideOut 1s ease 0s 1' });
});

CSS:
@keyframes slideOut {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

The fade-out animation works, but after the fade-out, mydiv immediately appears back at the initial position. What can I do to prevent this? Using jQuery to set display:none after the animation, suppresses the animation.

Ccenter
  • 107
  • 10

2 Answers2

3

Maybe what you are looking for is animation-fill-mode Property. It makes the <div> element retain the style values from the last keyframe when the animation ends. You can read about this here

DarkSuniuM
  • 2,523
  • 2
  • 26
  • 43
1

Add animation-fill-mode: forwards; to your element, and the animation will remain at the end.

darklightcode
  • 2,738
  • 1
  • 14
  • 17