Comment créer un effet de transition Slide-In en utilisant CSS ?

Comment créer une transition slide-in avec CSS

CSS offre plusieurs options pour créer une transition slide-in, y compris des transitions et des animations CSS3.

Transitions CSS3

Pour les transitions, le code correspondant ressemblerait à quelque chose comme this :

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

Dans cet exemple, la position de l'élément (#slide) passe de la gauche : -100px à 0 en 1 seconde lors du survol de l'élément parent (.wrapper).

Animations CSS3

Alternativement, les animations peuvent être utilisées pour obtenir un effet slide-in. Voici un exemple :

#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 animation démarre après un délai de 2 secondes et conserve son état final une fois terminée.

Remarque : Prise en charge de ces fonctionnalités par le navigateur peut être vérifié [ici](http://caniuse.com/).

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!