Comment créer une transition CSS Slide-In à partir de la gauche ?

Comment créer une transition slide-in CSS depuis la gauche

En CSS, réaliser une transition slide-in depuis la gauche implique d'exploiter des transitions ou des animations CSS3. Voici comment l'implémenter :

Utilisation des transitions CSS3 avec survol (Demo One)

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

Cet extrait effectue une transition en douceur de la position de l'élément à partir de la gauche : -100px ; à 0 sur 1 seconde en survol. Vous pouvez également utiliser transform:translate() pour ajuster la position de l'élément.

Utilisation d'animations CSS3 (démo deux)

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

Semblable à l'exemple précédent, cette animation démarre automatiquement après 2 secondes avec la propriété animation-delay. La définition du mode animation-fill-mode sur forwards préserve la visibilité de l'élément une fois l'animation terminée.

Support du navigateur

Reportez-vous à caniuse.com pour des informations détaillées sur la compatibilité du navigateur pour les transitions et les animations CSS.

Lectures complémentaires

Pour des connaissances plus approfondies sur ces techniques, explorer :

• Animations CSS : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
• Transitions CSS : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!