So verwenden Sie die CSS-Eigenschaft „animation-fill-mode'.-CSS-Tutorial-php.cn

So verwenden Sie die CSS-Eigenschaft „animation-fill-mode'.

(*-*)浩

Freigeben： 2019-05-28 18:06:04

Original

3183 Leute haben es durchsucht

Das Attribut „animation-fill-mode“ gibt an, ob der Animationseffekt vor oder nach der Wiedergabe der Animation sichtbar ist.

So verwenden Sie die CSS-Eigenschaft „animation-fill-mode'.

Hinweis: Der Attributwert besteht aus einem oder mehreren durch Kommas getrennten Füllmusterschlüsselwörtern.

Syntax

animation-fill-mode : none | forwards | backwards | both;

Nach dem Login kopieren

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

Wert

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.

BeispielGibt den Füllmodus für das h1-Element an:

<!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;}

Nach dem Login kopieren

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!