Wie erstellt man einen browserübergreifenden Slide-In-Effekt nur mit CSS?

So erstellen Sie einen browserübergreifenden Slide-In-Übergang nur mit CSS

Mit CSS können Sie nahtlos ein Element erstellen, das eingeschoben wird von links ohne JavaScript. Diese Vielseitigkeit ist entweder durch CSS3-Übergänge oder CSS3-Animationen möglich.

CSS-Übergang

Als Beispiel könnten Sie einen durch Hover ausgelösten Übergang implementieren:

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

Wenn Sie in diesem Fall mit der Maus über .wrapper fahren, wird #slide von links verschoben: -100px; nach links: 0; im Verlauf von 1 Sekunde.

CSS-Animation

Alternativ können Sie eine Animation verwenden, um den Slide-In-Effekt zu automatisieren:

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

Dieser Ansatz folgt demselben Schiebemechanismus, startet die Animation jedoch automatisch nach 2 Sekunden. Der Animationsfüllmodus: vorwärts; Die Eigenschaft stellt sicher, dass das Div nach Abschluss der Animation sichtbar bleibt.

Weitere Informationen zu CSS-Animationen und -Übergängen finden Sie in den folgenden Ressourcen:

• 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

Das obige ist der detaillierte Inhalt vonWie erstellt man einen browserübergreifenden Slide-In-Effekt nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!