HTML DOM中的animationName屬性用於設置或返回@keyframes動畫的名稱。
用法:
- 它用於設置animationName屬性:
object.style.animationName = "none|keyframename|initial|inherit"
- 它用於返回animationName屬性:
object.style.animationName
屬性值:它包含動畫的名稱。
- none:沒有動畫時。這是默認值。
- keyframename:綁定到選擇器的關鍵幀名稱。
- initial:用於設置默認值。
- inherited:它用於從父級繼承屬性。
示例1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM animationName Property
</title>
<style>
div {
width:100px;
height:100px;
background:green;
position:relative;
-webkit-animation:move_1 2s infinite;
/* For Chrome, Safari, Opera*/
animation:move_1 2s infinite;
}
/* For Chrome, Safari, Opera */
@-webkit-keyframes move_1 {
from {
left:150px;
}
to {
left:350px;
}
}
@keyframes move_1 {
from {
left:150px;
}
to {
left:350px;
}
}
/* For Chrome, Safari, Opera */
@-webkit-keyframes move_2 {
from {
left:270px;
width:0px;
height:0px;
}
to {
left:270px;
width:100px;
height:100px;
background:blue;
}
}
@keyframes move_2 {
from {
left:270px;
width:0px;
height:0px;
}
to {
left:270px;
width:100px;
height:100px;
background:blue;
}
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM animationName Property</h2>
<button onclick="Geeks()">
Click Here
</button>
<br>
<br>
<div id="GFG_DIV"></div>
<script>
function Geeks() {
// Changing the animation name.
document.getElementById(
"GFG_DIV").style.WebkitAnimationName =
"move_2";
// for Chrome, Safari, and Opera
document.getElementById(
"GFG_DIV").style.animationName =
"move_2";
}
</script>
</body>
</html>
輸出
-
在單擊按鈕之前:
-
單擊按鈕後:
-
最後:
示例2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM animationName Property
</title>
<style>
div {
width:100px;
height:100px;
background:green;
position:relative;
-webkit-animation:move_1 2s infinite;
/* For Chrome, Safari, Opera*/
animation:move_1 2s infinite;
}
/* For Chrome, Safari, Opera */
@-webkit-keyframes move_1 {
from {
left:150px;
}
to {
left:350px;
}
}
@keyframes move_1 {
from {
left:150px;
}
to {
left:350px;
}
}
/* For Chrome, Safari, Opera */
@-webkit-keyframes move_2 {
from {
left:270px;
width:0px;
}
to {
left:270px;
width:100px;
background:blue;
}
}
@keyframes move_2 {
from {
left:270px;
width:0px;
}
to {
left:270px;
width:100px;
background:blue;
}
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM animationName Property</h2>
<button onclick="Geeks()">
Click Here
</button>
<br>
<br>
<div id="GFG_DIV"></div>
<script>
function Geeks() {
// Changing the animation name.
document.getElementById(
"GFG_DIV").style.WebkitAnimationName =
"move_2";
// for Chrome, Safari, and Opera
document.getElementById(
"GFG_DIV").style.animationName = "move_2";
}
</script>
</body>
</html>
輸出
-
在單擊按鈕之前:
-
單擊按鈕後:
-
最後:
支持的瀏覽器:
- Google Chrome:43.0、4.0 Webkit
- Mozilla Firefox:16.0、5.0 moz
- 邊:10.0
- Opera:30.0,15.0 Webkit
- Safari:4.0 Webkit
相關用法
- HTML Style right用法及代碼示例
- HTML Style top用法及代碼示例
- HTML Style wordSpacing用法及代碼示例
- HTML Style textDecorationLine用法及代碼示例
- HTML Style borderRight用法及代碼示例
- HTML Style borderLeft用法及代碼示例
- HTML Style textAlign用法及代碼示例
- HTML Style opacity用法及代碼示例
- HTML Style height用法及代碼示例
- HTML Style whiteSpace用法及代碼示例
- HTML Style columnRuleStyle用法及代碼示例
- HTML Style display用法及代碼示例
- HTML Style transformStyle用法及代碼示例
- HTML Style visibility用法及代碼示例
- HTML Style animationDirection用法及代碼示例
注:本文由純淨天空篩選整理自PranchalKatiyar大神的英文原創作品 HTML | DOM Style animationName Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。