Wie erstelle ich mit CSS einen Slide-In-Übergangseffekt?

So erstellen Sie einen Slide-In-Übergang mit CSS

CSS bietet mehrere Optionen zum Erstellen eines Slide-In-Übergangs, einschließlich CSS3-Übergängen und Animationen.

CSS3-Übergänge

Für Übergänge würde der relevante Code etwa so aussehen Dies:

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

In diesem Beispiel wird die Position des Elements (#slide) im Laufe von 1 Sekunde von links: -100px auf 0 geändert, wenn Sie mit der Maus über das übergeordnete Element (.wrapper) fahren.

CSS3-Animationen

Alternativ können Animationen verwendet werden, um einen Slide-In-Effekt zu erzielen. Hier ist ein Beispiel:

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

Diese Animation startet nach einer Verzögerung von 2 Sekunden und behält den Endzustand bei, wenn sie abgeschlossen ist.

Hinweis: Browserunterstützung für diese Funktionen kann [hier](http://caniuse.com/) überprüft werden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Slide-In-Übergangseffekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!