Animation in CSS

Animation in CSS besteht aus zwei Teilen – @keyframes und Animation-*.

Die @keyframes at-Regel

Im ersten Teil müssen wir die @keyframes definieren.

Damit können wir den CSS-Stil angeben, der an den verschiedenen Punkten in der Dauer der Animation angewendet werden soll.

Die verschiedenen Zeitpunkte werden in %-Werten angegeben. Es können beliebig viele Offset-Positionen zwischen 0 und 100 Prozent angegeben werden.

von kann für den Offset 0 % verwendet werden, und bis ist dasselbe wie der Offset 100 %.

    @keyframes anim-name {
        from { css-style-a }
        to { css-style-b }
    }

Unten wurde der CSS-Stil für drei Zeitpunkte für eine Eigenschaft angegeben – Hintergrundfarbe.

    @keyframes colorit {
        0% { background-color: red; }
        50% { background-color: yellow; }
        100% { background-color: silver; }
    }

Es können auch mehrere Eigenschaften angegeben werden.

    @keyframes colorit {
        0% { 
            background-color: red; 
            left: 0px; 
            top: 50px;
        }
        50% { 
            background-color: yellow; 
            left: 50px; 
            top: 75px;
        }
        100% { 
            background-color: silver; 
            left: 200px;
            top: 25px;
        }
    }

Animation-*-Eigenschaften

Hier ist eine Liste von Eigenschaften, die verwendet werden können, um zu steuern, wie der Übergang von Stilen durchgeführt wird, um die UI/UX einer Animation zu ergeben.

• Animationskomposition
• Animationsverzögerung
• Animationsrichtung
• Animationsdauer
• Animationsfüllmodus
• animation-iteration-count
• Animationsname
• Animation-Play-State
• Animationsbereich
• animation-range-end
• animation-range-start
• Animations-Timeline
• Animations-Timing-Funktion

Jede dieser Untereigenschaften legt einen Aspekt der Animation fest.

Unten finden Sie die Definition für @keyframes mit dem Namen „colorit“, die 3 Sekunden lang ausgeführt werden sollen.

    div.box {
        ...
        animation-name: colorit;
        animation-duration: 3s;
        ...
    }

Alle Untereigenschaften können mithilfe der Animationskurzschrift in einer einzigen Zeile angegeben werden.

animation: 3s colorit;

Der Browser führt die erforderlichen Berechnungen durch und rendert die entsprechende Animation.

In ähnlicher Weise ermöglichen die Animationseigenschaften die Steuerung von Verzögerung, Timing, Anzahl der Wiederholungen (Iteration), Richtung usw., damit der Designer seine Vision verwirklichen kann.

Das obige ist der detaillierte Inhalt vonAnimation in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!