Animation

英[fɪl]

vt.& vi. (machen) voll

vt (Gefühle)

n. die Menge von... füllen; Damm füllen

Dritte Person Singular: Füllt Partizip Präsens: Füllt Partizip Perfekt: Füllt

英[məʊd] 美[moʊd]

n Zustand; Mode; Modus;

CSS3-Animationsfüllmodus-Eigenschaft Syntax

Funktion: Das Attribut animation-fill-mode gibt an, ob der Animationseffekt vor oder nach dem Abspielen der Animation sichtbar ist.

Syntax: animation-fill-mode: none |. vorwärts Wenn die Animation abgeschlossen ist, behalten Sie den letzten Eigenschaftswert (definiert im letzten Keyframe) bei. „backward“ wendet den Starteigenschaftswert (definiert im ersten Keyframe) an, bevor die Animation für einen durch „animation-delay“ angegebenen Zeitraum angezeigt wird. Es werden sowohl Vorwärts- als auch Rückwärtsfüllmodi angewendet.​

Hinweis: Internet Explorer 9 und frühere Versionen unterstützen das Attribut „animation-fill-mode“ nicht.

CSS3-Animationsfüllmodus-Eigenschaft Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 3s;
	animation-iteration-count:2;
	animation-fill-mode:forwards;

	/* Safari 和 Chrome */
	-webkit-animation:mymove 3s;
	-webkit-animation-iteration-count:2;
	-webkit-animation-fill-mode:forwards;
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
	from {top:0px;}
	to {top:200px;}
}
</style>
</head>
<body>

<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>

<div></div>

</body>
</html>

Instanz ausführen »

Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen