Animation

英[f?l]

vt.& vi. (machen) voll

vt (Gefühl)

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;

CSS-Animationsfüllmodus-Eigenschaft Syntax

animation-fill-mode Was bedeutet das?

animation-fill-mode ist eine Animationseigenschaft von CSS, die verwendet wird, um anzugeben, ob der Animationseffekt vor oder nach der Wiedergabe der Animation sichtbar ist.

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.

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