Sie können CSS3-Übergänge oder CSS3-Animationen verwenden, um ein Element einzufügen.
Für die Browserunterstützung: http://caniuse.com/
Ich habe zwei kurze Beispiele gemacht, um Ihnen zu zeigen, wie ich meine.
CSS-Übergang (beim Schweben)
Demo Eins
Relevanter Code
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
In diesem Fall den Übergang Im gerade die Position von left: -100px;
zu 0;
mit 1s. Dauer. Es ist auch möglich, das Element mit zu verschiebentransform: translate();
CSS-Animation
Demo Zwei
#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; }
}
Gleichen Prinzip wie oben (Demo One), aber die Animation startet automatisch nach 2 s, und in diesem Fall habe ich festgelegt haben animation-fill-mode
zu forwards
, die den Endzustand anhalten wird, halten die div sichtbar , wenn die Animation endet.
Wie gesagt, zwei kurze Beispiele, die Ihnen zeigen, wie es geht.
BEARBEITEN:
Einzelheiten zu CSS-Animationen und -Übergängen finden Sie unter:
Animationen
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Übergänge
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Hoffe das hat geholfen.
Christofer Vilander
quelle