@keyframes slideUp    { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideDown  { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes slideRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slideLeft  { from { transform: translateX(100%); } to { transform: translateX(0); } }

.slide-up    { animation: slideUp    0.3s var(--ease-out); }
.slide-down  { animation: slideDown  0.3s var(--ease-out); }
.slide-right { animation: slideRight 0.3s var(--ease-out); }
.slide-left  { animation: slideLeft  0.3s var(--ease-out); }