Три анимации одного деления сделаны в разное время

Question

Я хочу, чтобы три анимации одного деления выполнялись в разное время, например, когда я нажимаю .exit, ширина изменяется с 400 на 350, после того как маржинальная вершина становится -900px и, наконец, удаляет весь div

<div id="addplanpopup">
    <p class="exit">X</p>
    <h1>Your plan</h1>
    <input class="paperName" placeholder="Enter your plan's head">
</div>

$('#addplanpopup p').click(function(){
    $(this).parent().one('transitionend', function() {
        $(this).remove();
    })
    .css({
        // this be second animation 
        'width':'350px'
        // and marginTop one be third
        'marginTop':'-900px',
    })
})

#addplanpopup {
    width:400px;
    height:700px;
    background: red;
    left:50%;
    top:20%;
    transform: translate(-50%,-20%);
    transition: .4s;
}

Answer 1

Если вы хотите сделать эту анимацию только тогда, вы можете сделать эту анимацию только с помощью CSS, посмотрите мой код;

Запустите этот CSS при нажатии,

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
}

p {
  background: red;
  color: #fff;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
  animation-name: first-ani, second-ani, third-ani;
  animation-duration: 2s, 2s, 2s;
  animation-delay: 0s, 2s, 4s;
  animation-fill-mode: forwards;
}

@keyframes first-ani {
  0% {
    width: 100px;
  }
  100% {
    width: 50px;
  }
}

@keyframes second-ani {
  0% {
    width: 50px;
    transform: translateY(0px);
  }
  100% {
    width: 50px;
    transform: translateY(-80px);
  }
}

@keyframes third-ani {
  0% {
    width: 50px;
    transform: translateY(-80px);
    opacity: 1;
  }
  100% {
    width: 50px;
    transform: translateY(-80px);
    opacity: 0;
  }
}

<p>Hello</p>

Answer 2

Вы должны использовать animate, а не css:

$(".exit").click(function(){
    $("#addplanpopup").animate({width: "300"}, "slow", function() {
        $("#addplanpopup").animate({marginTop: "-900px"}, "slow", function() {                 
          $("#addplanpopup").remove();
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div id="addplanpopup">
            <p class="exit">X</p>
            <h1>Your plan</h1>
            <input class="paperName" placeholder="Enter your plan's head">
        </div>