28.05.2020 – Wie erstelle ich mit CSS einen Einblendeffekt beim Laden der Seite?

Verwenden Sie Animations- und Übergangseigenschaften, um mithilfe von CSS einen Einblendeffekt beim Laden der Seite zu erzeugen.

Methode 1: CSS-Animationseigenschaften verwenden: Die CSS-Animation wird durch 2 Keyframes definiert. Einer setzt die Deckkraft auf 0 und der andere setzt die Deckkraft auf 1. Wenn der Animationstyp auf „Einfach“ eingestellt ist, wird die Animation auf der Seite sanft ein- und ausgeblendet.

Dieses Attribut gilt für das Body-Tag. Immer wenn die Seite geladen wird, wird diese Animation abgespielt und die Seite scheint eingeblendet zu werden. Die Einblendzeit kann im Animationsattribut eingestellt werden.

Der Code lautet wie folgt:

body {
animation: fadeInAnimation equal 3s
animation-iteration-count: 1;
animation-fill-mode: vorwärts;
} @Keyframes Fadeinanimation {
0% {
Deckkraft: 0;
}
100% {
Deckkraft: 1;
}
} 🎜>

Beispiel: