Articles
Einführung in CSS
Animationen-bezogene CSS-Eigenschaften

Animationen-bezogene CSS-Eigenschaften

Dieser Artikel erklärt Animationen-bezogene CSS-Eigenschaften.

Sie können die Verwendung und Syntax der Eigenschaften @keyframes, animation und transition erlernen.

YouTube Video

HTML zur Vorschau

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animation & Übergang

@keyframes-Regel 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes wird in CSS-Animationen verwendet, um festzulegen, wie sich Stile während der Animation ändern. In @keyframes werden die Stiländerungen vom Start bis zum Ende der Animation durch Zeitprozentsätze oder Schlüsselwörter (from und to) festgelegt.

  • Dies ist ein Beispiel für eine Animation, bei der ein Element von links nach rechts gleitet und zu seiner ursprünglichen Position zurückkehrt.
  • In diesem Beispiel wird slide nach @keyframes geschrieben, um eine Animation mit dem Namen slide zu definieren.
  • 0% ist der Beginn der Animation, wobei translateX(0) das Element an seiner ursprünglichen Position positioniert.
  • 50% ist die Mitte der Animation, bei der das Element 200px nach rechts verschoben wird, indem translateX(200px) verwendet wird.
  • 100% ist das Ende der Animation, bei dem das Element zu seiner ursprünglichen Position zurückkehrt.
  • In der Klasse box-animation-slide wird die Eigenschaft animation verwendet, um die slide-Animation in 3-Sekunden-Intervallen anzuwenden.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Sie können die Stile während einer Animation präzise steuern. Durch die Angabe von Prozentsätzen können Sie verschiedene Stile zu beliebigen Zeitpunkten anwenden.
    • In diesem Beispiel ändert sich die Farbe allmählich von Rot zu Blau zu Grün zu Gelb und zurück zu Rot.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • In diesem Beispiel entspricht from 0% und to entspricht 100%. Dies ermöglicht es Ihnen, einfache Animationen zu definieren.

Grundlegende Syntax 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: Der Name der Animation. Dies wird mit der Eigenschaft animation oder animation-name angegeben.
  • Prozentsätze oder Schlüsselwörter: Verwenden Sie Prozentsätze von 0% bis 100% oder die Schlüsselwörter from (entspricht 0%) und to (entspricht 100%).

animation-Eigenschaft 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

Die animation-Eigenschaft wird verwendet, um Animationen auf ein Element anzuwenden. Animationen definieren, wie sich eine Reihe von CSS-Stilen im Laufe der Zeit ändern. Mit der animation-Eigenschaft können Sie das Timing, das Verhalten, die Verzögerung, die Anzahl der Wiederholungen und mehr einer Animation steuern.

  • Die Klasse box-animation-ease-in-out spezifiziert slide als animation-name und verwendet die slide-Animation, die in @keyframes definiert ist.
    • 3s ist die animation-duration, was bedeutet, dass jeder Animationszyklus in 3 Sekunden abgeschlossen wird.
    • ease-in-out ist die animation-timing-function, die bewirkt, dass die Animation langsam beginnt, beschleunigt und am Ende wieder langsamer wird.
    • infinite ist die animation-iteration-count, was bedeutet, dass die Animation unendlich oft wiederholt wird.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • Die Klasse box-animation-alternate spezifiziert color-change als animation-name und verwendet die color-change-Animation, die in @keyframes definiert ist.
    • 1s nach ease-in-out ist die animation-delay, die die Verzögerung angibt, bevor die Animation startet. Die Animation startet eine Sekunde später.
    • 3 nach 1s ist die animation-iteration-count, was bedeutet, dass die Animation 3-mal wiederholt wird.
    • alternate ist die animation-direction, die die Wiedergaberichtung der Animation angibt. alternate gibt an, dass die Animation abwechselnd abgespielt wird.

Zusammensetzung der animation-Eigenschaft

Die animation-Eigenschaft ist eine Kurzform-Eigenschaft, die mehrere Untereigenschaften in einer kombiniert. Hier sind die Hauptuntereigenschaften:.

  • animation-name-Eigenschaft: Gibt den Namen der anzuwendenden Animation an. Es muss dem Namen der Animation entsprechen, die in @keyframes definiert ist.
  • animation-duration-Eigenschaft: Gibt die Zeit an, die die Animation benötigt, um einen Zyklus abzuschließen. Die Zeiteinheiten sind Sekunden (s) oder Millisekunden (ms).
  • animation-timing-function-Eigenschaft: Gibt die Geschwindigkeitskurve der Animation an. Es werden Werte wie ease, linear, ease-in, ease-out, ease-in-out usw. verwendet.
    • Die Angabe von ease lässt die Animation langsam beginnen, beschleunigt sie und verlangsamt sie am Ende wieder.
    • Die Angabe von linear sorgt dafür, dass die Animation mit konstanter Geschwindigkeit von Anfang bis Ende verläuft.
    • Die Angabe von ease-in startet die Animation langsam und beendet sie schnell.
    • Die Angabe von ease-out startet die Animation schnell und beendet sie langsam.
    • Die Angabe von ease-in-out startet langsam, wird schneller und endet langsam.
  • Die Eigenschaft animation-delay gibt die Verzögerung an, bevor die Animation beginnt. Die Zeiteinheit ist entweder Sekunden oder Millisekunden.
  • Die Eigenschaft animation-iteration-count gibt die Anzahl der Wiederholungen der Animation an. Die Angabe von infinite wiederholt die Animation unbegrenzt.
  • Die Eigenschaft animation-direction gibt die Wiedergaberichtung der Animation an. Optionen sind normal (vorwärts), reverse (rückwärts), alternate (abwechselnd vorwärts und rückwärts) und alternate-reverse (abwechselnd, beginnend rückwärts).
  • Die Eigenschaft animation-fill-mode gibt den Zustand der Animation vor ihrem Start und nach ihrem Ende an. Es können none, forwards, backwards oder both angegeben werden.
  • Die Eigenschaft animation-play-state gibt an, ob die Animation läuft oder angehalten ist. Es kann running oder paused angegeben werden.

Zusammenfassung

Die Eigenschaft animation ist ein leistungsstarkes Werkzeug, um den Stil von Elementen dynamisch zu ändern. Mit @keyframes können Sie definieren, wie sich Stile über die Zeit ändern, und das detaillierte Verhalten der Animation mit jeder Untereigenschaft von animation steuern.

Eigenschaft transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

Die Eigenschaft transition wird verwendet, um Animationseffekte auf CSS-Stiländerungen anzuwenden. Sie ermöglicht es, Änderungen während Zustandswechseln wie hover, focus, active oder bei dynamischen Änderungen durch JavaScript sanft erscheinen zu lassen.

Betrachten wir ein Beispiel der transition-box-Klasse, bei dem die Hintergrundfarbe sanft geändert wird, wenn man über einen Button hovert. - In der Klasse transition-box wendet die Eigenschaft transition eine 2-sekündige Übergangszeit auf die Änderung der Hintergrundfarbe an. Die Änderung wird mit ease angegeben, was sie sanft macht. - Die Pseudo-Klasse hover ändert die Hintergrundfarbe von lightgray zu steelblue, wenn die Maus über den Button fährt. Diese Änderung erfolgt sanft über die in der transition-box-Klasse angegebenen 2 Sekunden.

Es ist möglich, transition gleichzeitig auf mehrere Eigenschaften anzuwenden. - Im Beispiel der Klasse transition-2-properties ändert sich die Hintergrundfarbe in 5 Sekunden und die Breite in 0,5 Sekunden.

Grundlegende Syntax 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • Die property gibt an, auf welche CSS-Eigenschaften die Animation angewendet werden soll. Die Angabe von all wendet die Animation auf alle Eigenschaften an.
  • Die duration bestimmt die Zeit, die die Animation für den Abschluss benötigt. Geben Sie Sekunden (s) oder Millisekunden (ms) an.
  • Die timing-function legt die Geschwindigkeitsänderung der Animation fest. Sie können Optionen wie ease, linear, ease-in, ease-out, ease-in-out usw. verwenden.
  • Die delay gibt die Verzögerungszeit an, bevor die Animation startet. Geben Sie dies in Sekunden oder Millisekunden an.

Detaillierte Eigenschaften von transition. 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

transition kann auch als einzelne Eigenschaften wie folgt verwendet werden.

  • transition-property: Gibt die Eigenschaft an, auf die die Animation angewendet wird.
  • transition-duration: Gibt die Dauer an, bis die Animation abgeschlossen ist.
  • transition-timing-function: Gibt die Fortschrittsgeschwindigkeit der Animation an. Es können Optionen wie ease, linear, ease-in, ease-out, ease-in-out verwendet werden.
  • transition-delay: Gibt die Verzögerungszeit an, bevor die Animation startet.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS-Eigenschaften im Zusammenhang mit FiltereffektenCSS-Eigenschaften im Zusammenhang mit 3D-Animationen