CSS Animation Cant Transform/Translate object to original location

Question

so i am currently working on a animation for an error message. So my idea is when an error occurs that the error message will "fly in" from above to its desired location and fades in linear. If the Error Message is dismissed with the X Symbol on the Left it should leave as it entered. So fly up and fade out linear. So the first part the flying in works an looks as planned. But flying away dosent work at all although its animation just literally does the opposite as the flying in animation.

Working Flying In Animation:

But when i set the animation of the div from the message to fade out animation, nothing at all happens.

Heres the CSS:

.message{
    border: 0.2em black solid;
    padding: 1em 1em 1em 1em;
    display: flex;
    animation-name: messageMoveIn;
    animation-duration: .7s;
    animation-fill-mode: forwards;
}
.message p{
    float: left;
    margin-right: 1em;
}
.message p:hover{
    color: grey;
    cursor: grab;
}
@keyframes messageMoveIn { /* works */
    from{transform: translateY(-1em); opacity: 0;};
    to{transform: translateY(0em); opacity: 1;};
}
@keyframes messageMoveOut { /* dosent works */
    from{transform: translateY(0em); opacity: 1;};
    to{transform: translateY(+1em); opacity: 0;};
}

HTML:

    <div class="message">
        <p v-on:click="error = ''; success = ''" class="cancel-button">X</p>
        <div class="message-content">
            {{success || error}}
        </div>
    </div>

Btw since i use Vue JS and the div loads conditionally i dont have to bother about overflow after its gone. I really appreciate your help :)

Answer 1

i would use class instead of keyframes animation beacuse its easier to manipulate. set initialy elemenet to translateY -1em, opacity 0 and transition: all .7s linear.when popup is open add classList to message with values: translateY(0) and opacity:1

.message {
  border: 0.2em black solid;
  padding: 1em 1em 1em 1em;
  display: flex;
  transform: translateY(-1em);
  opacity: 0;
  transition: all .7s linear;
}

.message.active {
  transform: translateY(0em);
  opacity: 1;
}

.message p {
  float: left;
  margin-right: 1em;
}

.message p:hover {
  color: grey;
  cursor: grab;
}