Wie erstellt man einen CSS-Slide-In-Übergang von links?

So erstellen Sie einen CSS-Slide-in-Übergang von links

Um in CSS einen Slide-in-Übergang von links zu erreichen, müssen Sie entweder CSS3-Übergänge oder Animationen nutzen. So können Sie es implementieren:

CSS3-Übergänge mit Hover verwenden (Demo Eins)

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

Dieses Snippet übergeht die Position des Elements reibungslos von links: -100px; auf 0 über 1 Sekunde beim Schweben. Sie können auch transform: translator() verwenden, um die Position des Elements anzupassen.

Verwendung von CSS3-Animationen (Demo 2)

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

Ähnlich wie im vorherigen Beispiel wird diese Animation automatisch nach 2 Sekunden gestartet mit der Eigenschaft „animation-delay“. Wenn Sie den Animationsfüllmodus auf „Vorwärts“ setzen, bleibt die Sichtbarkeit des Elements nach Abschluss der Animation erhalten.

Browser-Unterstützung

Ausführliche Informationen zur Browserkompatibilität für CSS-Übergänge und -Animationen finden Sie auf caniuse.com.

Weiterführende Literatur

Für tiefergehendes Wissen über diese Techniken, erkunden:

• CSS-Animationen: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
• CSS-Übergänge: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Das obige ist der detaillierte Inhalt vonWie erstellt man einen CSS-Slide-In-Übergang von links?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!