|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
一圖了解animation-fill-mode: none|forwards|backwards|both各屬性值
作者:admin 時間:2022-3-16 18:17:24 瀏覽:CSS3 animation動畫屬性有個animation-fill-mode屬性值，animation-fill-mode屬性值有none|forwards|backwards|both|initial|inherit，比較常用的有forwards和backwards。這些值有什么不同呢，今天本文將用一個實例一圖解釋animation-fill-mode: none|forwards|backwards|both各屬性值的不同之處。
實例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>animation-fill-mode: none|forwards|backwards|both|initial|inherit</title>
<link rel="stylesheet" href="">
<style>
body {
margin:100px 100px;
background:#eee;
}
*{
margin:0;
padding:0;
}
.box{
width: 100px;
height: 100px;
background: yellow; /* 初始顏色 黃色 */
border-radius: 50%;
opacity: 0.5;
animation: move 4s; /* 動畫運(yùn)行時間 */
animation-delay: 3s; /* 動畫延遲時間 */
animation-iteration-count: 3; /* 動畫迭代次數(shù) */
}
.box1 {
animation-fill-mode: none;
}
.box2 {
animation-fill-mode: forwards;
}
.box3 {
animation-fill-mode: backwards;
}
.box4 {
animation-fill-mode: both;
}
@keyframes move{
0%{
-webkit-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
background: blue; /* 動畫開始顏色 藍(lán)色 */
}
100%{
-webkit-transform:scale(0.2,0.2);
-ms-transform:scale(0.2,0.2);
-o-transform:scale(0.2,0.2);
transform:scale(0.2,0.2);
background: red; /* 動畫結(jié)束顏色 藍(lán)色 */
}
}
</style>
</head>
<body>
<span>none</span><div class="box box1"></div><br><br>
<span>forwards</span><div class="box box2"></div><br><br>
<span>backwards</span><div class="box box3"></div><br><br>
<span>both</span><div class="box box4"></div>
</body>
</html>
運(yùn)行結(jié)果
實例說明
1、圖形初始狀態(tài)
顏色是黃色。background: yellow;
動畫運(yùn)行時間為4s。animation: move 4s;
動畫延遲執(zhí)行時間為3s。animation-delay: 3s;
動畫迭代次數(shù)為3。animation-iteration-count: 3;
2、運(yùn)動開始狀態(tài)（from）
圓縮小到0.5倍。transform: scale(0.5,0.5);
動畫顏色為藍(lán)色。background: blue;
3、運(yùn)動結(jié)束狀態(tài)（to）
圓縮小到0.2倍。transform:scale(0.2,0.2);
動畫顏色為紅色。background: red;
從實例運(yùn)行的結(jié)果看出：
1、動畫填充模式為none時，一開始停留在初始狀態(tài)，結(jié)束時也是停留在初始狀態(tài)。
2、動畫填充模式為forwards時，一開始停留在初始狀態(tài)，結(jié)束時停留在結(jié)束狀態(tài)（to）。
3、動畫填充模式為backwards時，一開始停留在運(yùn)動開始狀態(tài)（from），結(jié)束時停留在初始狀態(tài)。
4、動畫填充模式為both時，一開始停留在運(yùn)動開始狀態(tài)（from），結(jié)束時停留在結(jié)束狀態(tài)（to）。
總結(jié)
通過本文實例的研究，可一圖了解animation-fill-mode: none|forwards|backwards|both各屬性值的不同之處，在實際應(yīng)用中便會得心應(yīng)手，選用合適的屬性值。
您可能對以下文章也感興趣
- 站長推薦
