CSS 3 slide-in de la transition de gauche

Question

Existe-t-il une solution multi-navigateurs pour produire une transition par insertion avec CSS uniquement, sans JavaScript? Vous trouverez ci-dessous un exemple de contenu HTML:

 <div>
    <img id="slide" src="http://.../img.jpg />
</div>
 

Answer 1

Vous pouvez utiliser des transitions CSS3 ou peut-être des animations CSS3 pour glisser dans un élément.

Pour la prise en charge du navigateur: http://caniuse.com/

J'ai fait deux exemples rapides juste pour vous montrer comment je veux dire.

Transition CSS (hover)

Une Démo

Code

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

Dans ce cas, Im juste la transition de la position à partir de left: -100px; de 0; avec un 1s. durée. Il est également possible de déplacer l'élément à l'aide de transform: translate();

Les animations CSS

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

Même principe que ci-dessus (Démo), mais l'animation démarre automatiquement au bout de 2s, et dans ce cas j'ai mis en animation-fill-mode de forwards, qui persistent à la fin de l'état, en gardant la div visible lorsque l'animation se termine.

Comme je l'ai dit, deux exemple rapide pour vous montrer comment il pourrait en être fait.

EDIT: Pour plus de détails sur les Animations CSS et les Transitions voir:

Animations

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Les Transitions

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Espérons que cela a aidé.