Comment créer un effet slide-in multi-navigateurs en utilisant uniquement CSS ?

Comment créer une transition slide-in multi-navigateurs avec CSS uniquement

En utilisant CSS, vous pouvez créer de manière transparente un élément qui glisse dans de la gauche sans JavaScript. Cette polyvalence est possible grâce aux transitions CSS3 ou aux animations CSS3.

Transition CSS

À titre d'exemple, vous pouvez implémenter une transition déclenchée par le survol :

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

Dans ce cas, survoler .wrapper fera glisser #slide de la gauche : -100px ; à gauche : 0 ; en 1 seconde.

Animation CSS

Vous pouvez également utiliser l'animation pour automatiser l'effet slide-in :

#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; }
}

Cette approche suit le même mécanisme de glissement, mais elle démarre automatiquement l'animation après 2 secondes. Le mode de remplissage d'animation : forwards ; La propriété garantit que le div reste visible une fois l'animation terminée.

Pour plus d'informations sur les animations et les transitions CSS, reportez-vous aux ressources suivantes :

• 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/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!