Heim > Artikel > Web-Frontend > Was ist zu verwenden, um einen CSS3-Animationseffekt zu erzielen?

Was ist zu verwenden, um einen CSS3-Animationseffekt zu erzielen?

WBOYOriginal: 2022-06-07 16:51:512364Durchsuche

Erzielen Sie CSS3-Animationseffekte: 1. Verwenden Sie die Regel „@keyframes“ mit dem Animationsattribut, um Animationseffekte zu erzielen. 2. Verwenden Sie das Übergangsattribut, um Animationseffekte zu erzielen. Die Syntax lautet „Element {Übergang: Attributname, Zeitgeschwindigkeitskurvenverzögerung“. }".

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist zu verwenden, um einen CSS3-Animationseffekt zu erzielen? 1. Was ist CSS-Animationen (CSS-Animationen)? zu Der Prozess des schrittweisen Übergangs von Elementen von einem Stil zum anderen

Es gibt viele gängige Animationseffekte wie Übersetzung, Drehung, Skalierung usw. Komplexe Animationen sind eine Kombination aus mehreren einfachen AnimationenDie Art und Weise, wie CSS Animationen implementiert, Es gibt die folgenden Typen:

transition implementiert eine Verlaufsanimation

animation implementiert eine benutzerdefinierte Animation

2. Implementierungsmethode

transition implementiert eine Verlaufsanimation

Die Eigenschaften des Übergangs sind wie folgt:

Eigenschaft: ausfüllen die erforderlichen Änderungen Das CSS-Attribut

Duration: die Zeiteinheit (s oder ms), die erforderlich ist, um den Übergangseffekt abzuschließen

Timing-Funktion: die Geschwindigkeitskurve des abgeschlossenen Effekts
Verzögerung: der Verzögerungsauslöser Zeitpunkt des Animationseffekts
Die Werte der Timing-Funktion sind wie folgt:

Beschleunigung von langsam über schnell zu langsam (Kubik-Bezier (0,25,0,1,0,25,1))

Ease-Out wird langsam langsamer (entspricht Kubik-Bezier(0,0,0,58,1))
Ease-In-Out wird zuerst schnell und verlangsamt sich dann (entspricht Kubik-Bezier(0,42, 0,0,58,1)), Einblendeffekt
cubic-bezier(n,n,n,n) Definieren Sie Ihre eigenen Werte in der Funktion „Cubic-Bezier“. Mögliche Werte sind Werte zwischen 0 und 1
Hinweis: Nicht alle Attribute können einen Übergang verwenden, z. B. display:nonedisplay:block
Zum Beispiel, um das Ereignis zu erreichen, wenn sich die Maus bewegt up Animationseffekt ändern

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

Ausgabeergebnis:
animation Benutzerdefinierte Animation implementieren

animation ist die Abkürzung für 8 Attribute, die wie folgt lauten:

animation-duration gibt die für die Animation erforderliche Zeit an Um einen Zyklus abzuschließen, ist die Einheit Sekunden (s) oder Millisekunden (ms), der Standardwert ist 0

Was ist zu verwenden, um einen CSS3-Animationseffekt zu erzielen?

animation-timing-function gibt die Animations-Timing-Funktion an, dh die Geschwindigkeitskurve der Animation, der Standardwert ist „ „ease“ linear, „ease“, „ease-in“, „ease-out“, „ease-in-out“

animation-delay gibt die Animationsverzögerungszeit an, d. iteration-count gibt an, wie oft die Animation abgespielt wird. Die Standardeinstellung ist 1. Füllmodus gibt den Füllmodus der Animation an. Die Standardeinstellung ist „keine vorwärts, rückwärts, beides“. Animation-Play-State gibt den Wiedergabestatus der Animation an, läuft oder pausiert. Die Standardeinstellung ist „Running Running, Pauser“

animation-name gibt den Namen der @keyframes-Animation an
CSS-Animation muss nur einige Schlüsselbilder definieren, und der Browser berechnet den Rest der Bilder basierend auf der Interpolation der Timing-Funktion ,
Wenn wir also das Element in einem Kreis drehen lassen möchten, müssen wir nur die Start- und Endbilder definieren:

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

von bedeutet das erste Bild, bis bedeutet das Ende Der Rahmen
kann auch einen Prozentsatz verwenden, um den Lebenszyklus zu beschreiben

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

Nachdem Sie den Schlüsselrahmen definiert haben, können Sie ihn direkt verwenden:
```
animation: rotate 2s;
```
Übergang (Übergang) zum Festlegen von Elementen Overstyle hat eine Ähnlicher Effekt wie bei der Animation, aber die Details sind sehr unterschiedlich.
Transformieren (Transformieren) wird zum Drehen, Skalieren, Verschieben oder Neigen von Elementen verwendet. Es hat nichts mit der Animation von Einstellungsstilen zu tun, es entspricht der Farbe. Es wird dasselbe verwendet Um das „Erscheinungsbild“ des Elements
translate (Bewegung) festzulegen, handelt es sich lediglich um einen Attributwert der Transformation, d
CSS-Video-Tutorial
)

Das obige ist der detaillierte Inhalt vonWas ist zu verwenden, um einen CSS3-Animationseffekt zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist das Attribut des oberen Randes in CSS?Nächster Artikel：Was ist das Attribut des oberen Randes in CSS?

In Verbindung stehende Artikel

Mehr sehen