<div class="First"></div>
<div class="Second"></div>
@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;
background-color: #00498A;
}
div {
width: 100px;
height: 100px;
}
.First {
background-color: #FF9700;
}
.Second {
background-color: #159F62;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.