Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie die CSS-Eigenschaft „animation-fill-mode'.
So verwenden Sie die CSS-Eigenschaft „animation-fill-mode'.
- (*-*)浩Original
- 2019-05-28 18:06:043211Durchsuche
Das Attribut „animation-fill-mode“ gibt an, ob der Animationseffekt vor oder nach der Wiedergabe der Animation sichtbar ist.
Hinweis: Der Attributwert besteht aus einem oder mehreren durch Kommas getrennten Füllmusterschlüsselwörtern.
Syntax
animation-fill-mode : none | forwards | backwards | both;
|
Beschreibung |
||||||||||
| none | Ändert das Standardverhalten nicht. | ||||||||||
| vorwärts | Wenn die Animation abgeschlossen ist, behalten Sie den letzten Eigenschaftswert (definiert im letzten Keyframe) bei. | ||||||||||
| rückwärts | in der Animation -Delay wendet den Starteigenschaftswert (definiert im ersten Keyframe) an, bevor die Animation für einen durch -delay angegebenen Zeitraum angezeigt wird. | ||||||||||
| sowohl | vorwärts als auch Es werden Rückwärtsfüllmodi angewendet. |
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-fill-mode: forwards;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft „animation-fill-mode'.. 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：So verwenden Sie das CSS-Zeilenumbruch-AttributNächster Artikel：So verwenden Sie das CSS-Zeilenumbruch-Attribut