CSS3-Animationsfüllmodus-Eigenschaft


  Übersetzungsergebnisse：
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-EigenschaftSyntax

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-EigenschaftBeispiel

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

Beliebte Empfehlungen

Heim

Videos

Fragen und Antworten

einreichen