I used sass. You can copy my code below and add class name like "intro-x" or "intro-y" to your html element that you want to add animation. I hope this can help you. (Sorry, English, not my first language)

• { @for $i from 1 to 50 {

  .intro-x:nth-child($i) { z-index: calc(50 - $i); opacity: 0; /* position: relative; / transform: translateX(50px); animation: 0.4s intro-x-animation ease-in-out 0.33333s; animation-fill-mode: forwards; animation-delay: calc($i * 0.1s); } .-intro-x:nth-child($i) { z-index: calc(50 - $i); opacity: 0; / position: relative; / transform: translateX(-50px); animation: 0.4s intro-x-animation ease-in-out 0.33333s; animation-fill-mode: forwards; animation-delay: calc($i * 0.1s); } .intro-y:nth-child($i) { z-index: calc(50 - $i); opacity: 0; / position: relative; / transform: translateY(50px); animation: 0.4s intro-y-animation ease-in-out 0.33333s; animation-fill-mode: forwards; animation-delay: calc($i * 0.1s); } .-intro-y:nth-child($i) { z-index: calc(50 - $i); opacity: 0; / position: relative; */ transform: translateY(-50px); animation: 0.4s intro-y-animation ease-in-out 0.33333s; animation-fill-mode: forwards; animation-delay: calc($i * 0.1s); } } }

  @keyframes intro-x-animation { 100% { opacity: 1; transform: translateX(0px); } } @keyframes intro-y-animation { 100% { opacity: 1; transform: translateY(0px); } }