So verwenden Sie CSS3-Animationen, um ein reibungsloses Laden von Seiten zu erreichen

In diesem Artikel erfahren Sie, wie Sie CSS3-Animationen verwenden, um ein reibungsloses Laden von Seiten zu erreichen. Freunde in Not können sich darauf beziehen.

Ich war beeindruckt von einigen der subtilen Animationen, die ich auf den Produktseiten von Apple.com gesehen habe. Es beginnt normalerweise mit einer Animation, die beim Laden der Seite abgespielt wird und bei der ein Element durch Schieben/Einblenden auf der Seite eingeführt wird. Es ist so subtil und dennoch so befriedigend für den Benutzer.

Kürzlich habe ich einige Probleme beim Hinzufügen einfacher Animationseffekte ohne Wellen entdeckt, die das Erlebnis ruinieren.

Das Problem beim Abspielen von Animationen beim Laden der Seite besteht darin, dass viele Ressourcen (einschließlich Bilder und Skripte, die das DOM manipulieren) dazu führen, dass der Browser neu gezeichnet/neu angeordnet wird. Dies konkurriert mit den Browserressourcen beim Versuch, die Animation abzuspielen, was zu Bildausfällen führt. (Empfohlenes Tutorial: CSS3-Video-Tutorial)

Eine Problemumgehung besteht darin, den Start der Animation zu verzögern, damit die Seite gezeichnet werden kann, bevor die Animation abgespielt wird.

Wenn ein Element auf der Seite eingeführt/angezeigt wird, wird das Element normalerweise ausgeblendet (Deckkraft: 0) und erhält mit der Zeit seine volle Deckkraft.

Obwohl die Animationseigenschaft über einen „Verzögerungs“-Parameter verfügt, wird durch die Angabe einer Zeit für diesen Parameter das Element mit der angegebenen Verzögerungslänge in seinem letzten Frame angezeigt. Anschließend wird das Element ausgeblendet und mit voller Deckkraft animiert. Dies ist ein unerwünschter Effekt. Wir möchten den letzten Keyframe während der Verzögerung nicht sehen.

Um zu vermeiden, dass das Element während der Verzögerung angezeigt wird, befolgen Sie diese Schritte:

1) Erstellen Sie ein Div im HTML, das wir animieren möchten.
2) Erstellen Sie in unserem CSS Keyframes in der Datei (Diese definieren im Grunde, wie sich die Dinge ändern, in diesem Fall Deckkraft 0 bis Deckkraft 100)

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

3) Erstellen Sie ein div-Tag in unserem CSS, definieren Sie unsere Animation (Dauer, Startverzögerung usw.) und verknüpfen Sie sie zu unserem Keyframe

.fade-in {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s}

Der Schlüssel ist die Kombination von

animation-fill-mode:forwards

und

opacity: 0

. Dadurch wird das Element ausgeblendet, das wir für die angegebene Verzögerung animieren möchten ( Deckkraft: 0) und erzwingen Sie, dass die Animation beim letzten Keyframe stoppt (Deckkraft: 1).

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3-Animationen, um ein reibungsloses Laden von Seiten zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!