#0053AA[slide-in-from] {
  opacity: 0;
  transform: translateY(var(--translateY,0)) translateX(var(--translateX, 0));
  animation: slideInFrom var(--sif-duration, 550ms) var(--sif-timing, ease-out) var(--sif-delay, 0ms) forwards;
}
[slide-in-from ^= "top"]    { --translateY: -100% }
[slide-in-from ^= "bottom"] { --translateY:  100% }
[slide-in-from $= "left"]   { --translateX: -100% }
[slide-in-from $= "right"]  { --translateX:  100% }





@keyframes slideInFrom{ to {  transform: unset; opacity: unset } }










/* demo */
body { 
  display: grid; 
  gap: 1rem; 
  place-items: center; 
  padding: 1rem; 
  font-family: sans-serif; 
  color: white;
  text-align: center; 
  background: #1D1E22 }
div { 
  padding: 0.5rem 1rem; 
  background-color: var(--clr); 
  color: black;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / .5)
}
div:nth-of-type(1){ --clr: #6152F1 }
div:nth-of-type(2){ --clr: #5A8BFD }
div:nth-of-type(3){ --clr: #00A8AA }
div:nth-of-type(4){ --clr: #8CA600 }
div:nth-of-type(5){ --clr: #F5D63D }
div:nth-of-type(6){ --clr: #F3A000}
div:nth-of-type(7){ --clr: #F42300 }
div:nth-of-type(8){ --clr: #CC39F2 }
div:nth-of-type(9){ --clr: #0079F2 }
div:nth-of-type(10){ --clr: #1DA500 }
div:nth-of-type(11){ --clr: #8F25AA }
div:nth-of-type(12){ --clr: #C5D747 }
div:nth-of-type(13){ --clr: #FFF }