así que actualmente estoy trabajando en una animación para un mensaje de error. Entonces, mi idea es que cuando ocurre un error, el mensaje de error "vuela" desde arriba a la ubicación deseada y se desvanece en forma lineal. Si el mensaje de error se descarta con el símbolo X a la izquierda, debería salir como entró. Así que vuela hacia arriba y desaparece linealmente. Entonces, la primera parte, el vuelo, funciona y se ve según lo planeado. Pero volar lejos no funciona en absoluto, aunque su animación literalmente hace lo contrario que volar en la animación.

Trabajando Volando En Animación:

Pero cuando configuro la animación del div del mensaje para que se desvanezca la animación, no sucede nada.

Aquí está el 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>

Por cierto, dado que uso Vue JS y el div se carga condicionalmente, no tengo que preocuparme por el desbordamiento después de que se haya ido. Realmente aprecio tu ayuda :)