[data-esoanimate] {
      opacity: 0;
      transition-property: opacity, transform;
      transition-duration: 300ms; /* 기본 지속시간 */
      transition-delay: 0ms;      /* 기본 딜레이 */
      transition-timing-function: ease-in-out;
    }
    

/* Fade */
[data-esoanimate="fade-in"]      { opacity: 0; }
[data-esoanimate="fade-in"].active { opacity: 1; }

[data-esoanimate="fade-out"]      { opacity: 1; }
[data-esoanimate="fade-out"].active { opacity: 0; }

[data-esoanimate="fade-up"]      { transform: translateY(20px); }
[data-esoanimate="fade-up"].active { opacity: 1; transform: translateY(0); }

[data-esoanimate="fade-down"]      { transform: translateY(-20px); }
[data-esoanimate="fade-down"].active { opacity: 1; transform: translateY(0); }

[data-esoanimate="fade-left"]      { transform: translateX(20px); }
[data-esoanimate="fade-left"].active { opacity: 1; transform: translateX(0); }

[data-esoanimate="fade-right"]      { transform: translateX(-20px); }
[data-esoanimate="fade-right"].active { opacity: 1; transform: translateX(0); }

/* Zoom */
[data-esoanimate="zoom-in"]      { transform: scale(0.8); }
[data-esoanimate="zoom-in"].active { opacity: 1; transform: scale(1); }

[data-esoanimate="zoom-out"]      { transform: scale(1.2); }
[data-esoanimate="zoom-out"].active { opacity: 1; transform: scale(1); }

/* Rotate */
[data-esoanimate="rotate-left"]      { transform: rotate(-15deg); }
[data-esoanimate="rotate-left"].active { opacity: 1; transform: rotate(0deg); }

[data-esoanimate="rotate-right"]      { transform: rotate(15deg); }
[data-esoanimate="rotate-right"].active { opacity: 1; transform: rotate(0deg); }

/* Slide diagonal */
[data-esoanimate="slide-up-left"]      { transform: translate(-20px, 20px); }
[data-esoanimate="slide-up-left"].active { opacity: 1; transform: translate(0, 0); }

[data-esoanimate="slide-down-right"]      { transform: translate(20px, -20px); }
[data-esoanimate="slide-down-right"].active { opacity: 1; transform: translate(0, 0); }