Comment créer une transition Slide-In en utilisant uniquement CSS ?

Comment ajouter une transition slide-in avec du CSS pur

Dans la conception Web, la création de transitions visuellement attrayantes peut améliorer l'expérience utilisateur. Un effet populaire est une transition glissante, dans laquelle un élément passe de l'écran à la position souhaitée lorsqu'il est déclenché. Ce didacticiel explique comment obtenir cet effet avec CSS, sans avoir besoin de JavaScript.

Option 1 : Transitions CSS (au survol)

Les transitions CSS vous permettent d'effectuer des transitions en douceur transformer les propriétés d'un élément sur une durée spécifiée. Voici un exemple pour créer une transition slide-in au survol :

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

Option 2 : Animation CSS

Les animations CSS offrent plus de contrôle sur la transition, vous permettant pour spécifier une heure de début et de fin. Voici un exemple utilisant l'animation :

#slide {
    left: -100px;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

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

Assistance et ressources pour les navigateurs

Pour la compatibilité des navigateurs, reportez-vous aux liens suivants :

• Transitions CSS : https://caniuse.com/transitions
• Animations CSS : https://caniuse.com/animations

Ressources supplémentaires

Pour en savoir plus sur les animations et les transitions CSS, consultez le Mozilla Developer Network (MDN) suivant ) articles :

• Animations : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
• Transitions : https://developer.mozilla.org/en-US/docs/Web/Guide /CSS/Utilisation_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!