Edit in JSFiddle

@keyframes fade {
  from {
    opacity: var(--fromOpacity, 0);
    transform: translate(
      var(--fromX, 0), 
      var(--fromY, 0)) 
    ;
  }
  to {
    opacity: var(--toOpacity, 1);
    transform: none;
  }
}


.First {
  --fromY: 20px;
  
  animation: fade 2s 1;  
}

.Second {
  --fromY: -40px;
  --fromOpacity: 1;
  --toOpacity: 0;
  
  animation: fade 2s 1;
  animation-fill-mode: forwards;
}







































/* DEMO ONLY */

body{display:grid;grid-auto-flow:column;grid-gap:100px;justify-content:center;align-items:center;height:100vh;margin:0;}div{width:100px;height:100px}.First{background-color:#00E2BC}.Second{background-color:#D480AA}