.box {
    opacity: 0;
    transition: all 0.8s ease;
    /* Assurer que les transformations n'affectent pas le flux du document */
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Animation de gauche à droite */
.from-left {
    transform: translateX(-100px);
}

/* Animation de droite à gauche */
.from-right {
    transform: translateX(100px);
}

/* Animation de bas en haut */
.from-bottom {
    transform: translateY(100px);
}

/* Animation de haut en bas */
.from-top {
    transform: translateY(-100px);
}

/* Animation de zoom-in (agrandissement) */
.zoom-in {
    transform: scale(0.5);
}

/* Animation de zoom-out (rétrécissement) */
.zoom-out {
    transform: scale(1.5);
}

/* Classe ajoutée par JS quand l'élément est visible */
.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}