apply css3 animations when an element is removed using only css3

Question

I'm a little bit stuck on animations, so I have a div that is added dynamically using jQuery .append() so when the page is loaded the div content will be added and from css I'll apply some animations using @keyframes. My problem is when the div content is closed using jQuery .remove() because if the div content is removed how I will apply animation to this ? So basically on page loaded the content will animate from top to bottom and on close should go back from bottom to top, how can I do that reverse animation ? I want to apply that reverse animation using only css not js.

.child-container {
  background: red;
  height: 100px;
  width: 150px;
  padding: 10px;
  animation-name: anime;
  animation-duration: 1s;
}

@keyframes anime {
  from,
  0%,
  100%,
  to {
    animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -200px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

$(document).ready(function() {
  $(".container").append($("<div class='child-container'>Hello Jimmy!<a class='close'><b>X</b></div>"));
  $(".close").on('click', function() {
    $(this).parent().remove();
  });
});

.container {
  padding: 10px;
  background: orange;
}

.child-container {
  background: red;
  height: 100px;
  width: 150px;
  padding: 10px;
  animation-name: anime;
  animation-duration: 1s;
}

.close {
  float: right;
  cursor: pointer;
}

.close:hover {
  color: #fff;
}


/*ANIMATIONS*/

@keyframes anime {
  from,
  0%,
  100%,
  to {
    animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -200px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

Answer 1

Bellow snippet will show the exact animation you have on open when closing the div.

$(document).ready(function() {
  $(".container").append($("<div class='child-container'>Hello Jimmy!<a class='close'><b>X</b></div>"));
  $(".close").on('click', function() {
    $(this).parent().css({
      "animation": "close-anime 1s forwards"
    });
  });
});

.container {
  padding: 10px;
  background: orange;
}

.child-container {
  background: red;
  height: 100px;
  width: 150px;
  padding: 10px;
  animation-name: anime;
  animation-duration: 1s;
}

.close {
  float: right;
  cursor: pointer;
}

.close:hover {
  color: #fff;
}


/*ANIMATIONS*/

@keyframes anime {
  from,
  0%,
  100%,
  to {
    animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -200px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes close-anime {
  from,
  0%,
  100%,
  to {
    animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, -200px, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

added code:

CSS

@keyframes close-anime {
  from,
  0%,
  100%,
  to {
    animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, -200px, 0);
  }
}

JS

$(this).parent().css({
      "animation": "close-anime 1s forwards"
});

Answer 2

You don't need to use keyframes for this sort of animation. What you should rather do is toggle a class with changing top properties of your .child-container element and apply a transition.

Add the initial class with a setTimeout so that the class is applied and the animation happens. And remove the class on close. Note you can vary the transition timing here (I have provided a 1s duration here).

Updated fiddle.

Refer code:

$(document).ready(function() {
  $(".container").append($("<div class='child-container'>Hello Jimmy!<a class='close'><b>X</b></div>"));
  setTimeout(function() {
    $(".child-container").addClass("initial");
  }, 1);
  $(".close").on('click', function() {
    $(this).parent().removeClass("initial");
  });
});

.container {
  padding: 10px;
  background: orange;
}

.child-container {
  background: red;
  height: 100px;
  width: 150px;
  padding: 10px;
  top: -200px;
  position: relative;
  transition: all 1s;
}

.initial {
  top: 0;
}

.close {
  float: right;
  cursor: pointer;
}

.close:hover {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

</div>

Answer 3

You must add a class to handle a new "state" of your element in css.

But you shouldn't use animation and keyframe for that. Instead, use transition. Exemple :

.myElement {
    top: 0;
    transition: top 0.4s linear;
}

.meElementOpened {
    top: 50%;
}

We set the transition on the element's default class (the one the element must always have) to handle the opening and the closing animation on the top property.

transition doc