技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

一圖了解animation-fill-mode: none|forwards|backwards|both各屬性值

作者:admin    時(shí)間:2022-3-16 18:17:24    瀏覽:

CSS3 animation動(dòng)畫屬性有個(gè)animation-fill-mode屬性值,animation-fill-mode屬性值有none|forwards|backwards|both|initial|inherit,比較常用的有forwardsbackwards。這些值有什么不同呢,今天本文將用一個(gè)實(shí)例一圖解釋animation-fill-mode: none|forwards|backwards|both各屬性值的不同之處。

實(shí)例代碼

<!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; /* 動(dòng)畫運(yùn)行時(shí)間 */
  animation-delay: 3s; /* 動(dòng)畫延遲時(shí)間 */
  animation-iteration-count: 3; /* 動(dòng)畫迭代次數(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; /* 動(dòng)畫開始顏色 藍(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; /* 動(dòng)畫結(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>

demodownload

運(yùn)行結(jié)果

一圖解釋animation-fill-mode: none|forwards|backwards|both各屬性值

實(shí)例說明

1、圖形初始狀態(tài)

顏色是黃色。background: yellow;

動(dòng)畫運(yùn)行時(shí)間為4s。animation: move 4s;

動(dòng)畫延遲執(zhí)行時(shí)間為3s。animation-delay: 3s;

動(dòng)畫迭代次數(shù)為3。animation-iteration-count: 3;

2、運(yùn)動(dòng)開始狀態(tài)(from)

圓縮小到0.5倍。transform: scale(0.5,0.5);

動(dòng)畫顏色為藍(lán)色。background: blue;

3、運(yùn)動(dòng)結(jié)束狀態(tài)(to)

圓縮小到0.2倍。transform:scale(0.2,0.2);

動(dòng)畫顏色為紅色。background: red;

從實(shí)例運(yùn)行的結(jié)果看出:

1、動(dòng)畫填充模式為none時(shí),一開始停留在初始狀態(tài),結(jié)束時(shí)也是停留在初始狀態(tài)。

2、動(dòng)畫填充模式為forwards時(shí),一開始停留在初始狀態(tài),結(jié)束時(shí)停留在結(jié)束狀態(tài)(to)。

3、動(dòng)畫填充模式為backwards時(shí),一開始停留在運(yùn)動(dòng)開始狀態(tài)(from),結(jié)束時(shí)停留在初始狀態(tài)。

4、動(dòng)畫填充模式為both時(shí),一開始停留在運(yùn)動(dòng)開始狀態(tài)(from),結(jié)束時(shí)停留在結(jié)束狀態(tài)(to)。

總結(jié)

通過本文實(shí)例的研究,可一圖了解animation-fill-mode: none|forwards|backwards|both各屬性值的不同之處,在實(shí)際應(yīng)用中便會(huì)得心應(yīng)手,選用合適的屬性值。

您可能對(duì)以下文章也感興趣

x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */