DOM樣式animationFillMode屬性用於在不播放動畫或動畫結束時或動畫延遲時指定元素的樣式。 animationFillMode屬性可以覆蓋CSS動畫的默認行為,當第一個關鍵幀為“played”時,CSS動畫會通過該默認行為來影響元素,並在最後一個關鍵幀完成後停止影響該元素。
用法:
- 要返回animationFillMode屬性,請使用以下命令:
object.style.animationFillMode;
- 要設置animationFillMode屬性,請使用以下命令:
object.style.animationFillMode = "none|forwards|backwards|both| initial|inherit";
屬性值:
- none:在目標執行之前或之後,它將不會對目標應用任何樣式。
- forwards:它將在動畫結束時應用屬性值。
- backwards:在animation-delay定義的時間段內,它將應用在關鍵幀中定義的屬性值,該屬性將開始動畫的第一次迭代。
- both:它將向前和向後應用於動畫的屬性值。
- initial:它將屬性設置為其默認值。
- inherit:此屬性是從其父級繼承的。
方法:
<div>元素獲取動畫延遲期間動畫開始之前由第一個關鍵幀設置的樣式值。
示例1:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:50px;
height:50px;
background:green;
position:relative;
-webkit-animation:animate 2s 1;
/* Chrome, Safari, Opera */
animation:animate 2s 2;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
from {
left:500px;
}
to {
left:0px;
}
}
@keyframes animate {
from {
left:500px;
}
to {
left:0px;
}
}
</style>
</head>
<body>
<p>Click the "Try it" button to let the
DIV element keep the styles set by the
last keyframe:to {left:0px;}, when
the animation is finished.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
// Code for Chrome, Safari, and Opera
document.getElementById(
"div1").style.WebkitAnimationFillMode =
"backwards";
document.getElementById(
"div1").style.animationFillMode =
"backwards";
}
</script>
<div id="div1"></div>
</body>
</html>
輸出:
示例2:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:50px;
height:50px;
background:green;
position:relative;
-webkit-animation:animate 2s 1;
/* Chrome, Safari, Opera */
animation:animate 2s 2;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
from {
left:0px;
}
to {
left:500px;
}
}
@keyframes animate {
from {
left:0px;
}
to {
left:500px;
}
}
</style>
</head>
<body>
<p>Click the "Try it" button to let the
DIV element keep the styles set by the
last keyframe:to {left:500px;}, when
the animation is finished.
</p>
<button onclick="myFunction()">
Try it
</button>
<script>
function myFunction() {
// Code for Chrome, Safari, and Opera
document.getElementById(
"div1").style.WebkitAnimationFillMode =
"forwards";
document.getElementById(
"div1").style.animationFillMode =
"forwards";
}
</script>
<div id="div1"></div>
</body>
</html>
輸出:
支持的瀏覽器:animationFillMode屬性支持的瀏覽器如下所示:
- 穀歌瀏覽器43.0
- Firefox 16.0
- Opera 30.0
相關用法
- HTML Style right用法及代碼示例
- HTML Style top用法及代碼示例
- HTML Style textAlign用法及代碼示例
- HTML Style borderRight用法及代碼示例
- HTML Style borderLeft用法及代碼示例
- HTML Style wordSpacing用法及代碼示例
- HTML Style textDecorationLine用法及代碼示例
- HTML Style height用法及代碼示例
- HTML Style whiteSpace用法及代碼示例
- HTML Style opacity用法及代碼示例
- HTML Style columnRuleStyle用法及代碼示例
- HTML Style display用法及代碼示例
- HTML Style transformStyle用法及代碼示例
- HTML Style visibility用法及代碼示例
- HTML Style animationDirection用法及代碼示例
注:本文由純淨天空篩選整理自chaitanyashah707大神的英文原創作品 HTML | DOM Style animationFillMode Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。