/* Base style */
  #myElement {
    width: 300px;
    height: 150px;
    background: #007bff;
    color: white;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto;
    border-radius: 10px;
    opacity: 0; /* start hidden */
  }

  /* Fade in up */
  .fade-in-up {
    animation: fadeInUp 0.8s forwards;
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Fade in down */
  .fade-in-down {
    animation: fadeInDown 0.8s forwards;
  }
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Fade in left */
  .fade-in-left {
    animation: fadeInLeft 0.8s forwards;
  }
  @keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Fade in right */
  .fade-in-right {
    animation: fadeInRight 0.8s forwards;
  }
  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Fade in scale */
  .fade-in-scale {
    animation: fadeInScale 0.8s forwards;
  }
  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Fade in rotate */
  .fade-in-rotate {
    animation: fadeInRotate 0.8s forwards;
  }
  @keyframes fadeInRotate {
    from { opacity: 0; transform: rotate(-90deg); }
    to { opacity: 1; transform: rotate(0deg); }
  }