CSS3 animation-fill-mode

admin發表於2018-09-06
CSSS3
animation-fill-mode屬性設定元素動畫時間之外的狀態。

如果提供多個屬性值，以逗號進行分隔。

語法結構: 

[CSS] 純文字檢視 複製程式碼
animation-fill-mode : none | forwards | backwards | both;

引數解析:

（1）.none:不改變預設行為。

（2）.forwards:當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。

（3）.backwards:設定物件狀態為動畫開始時的狀態。

（4）.both:設定物件狀態為動畫結束或開始的狀態。

程式碼例項: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
h1{font-size:16px;}
li{
  padding:10px;
  list-style:none;
}
span{
  display:block;
  width:80px;
  height:80px;
  padding:10px;
  border-radius:50px;
  box-shadow:0 0 10px rgba(204,102,0,.8);
  background:#F6D66E;
  background:-moz-linear-gradient(top,#fff,#F6D66E);
  background:-webkit-linear-gradient(top,#fff,#F6D66E);
  background:linear-gradient(top,#fff,#F6D66E);
}
 
.none span{
  -moz-animation:animations 1s ease;
  -webkit-animation:animations 1s ease;
  animation:animations 1s ease;
}
@-webkit-keyframes animations{
  0%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(400px);}
}
@-moz-keyframes animations{
  0%{-moz-transform:translate(0,0);}
  100%{-moz-transform:translate(400px);}
}
@keyframes animations{
  0%{transform:translate(0,0);}
  100%{transform:translate(400px);}
}
 
.forwards span{
  -moz-animation:animations2 1s ease forwards;
  -webkit-animation:animations2 1s ease forwards;
  animation:animations2 1s ease forwards;
}
@-webkit-keyframes animations2{
  0%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(400px);}
}
@-moz-keyframes animations2{
  0%{-moz-transform:translate(0,0);}
  100%{-moz-transform:translate(400px);}
}
@keyframes animations2{
  0%{transform:translate(0,0);}
  100%{transform:translate(400px);}
}
 
.backwards span{
  -moz-animation:animations3 1s ease backwards;
  -webkit-animation:animations3 1s ease backwards;
  animation:animations3 1s ease backwards;
}
@-webkit-keyframes animations3{
  0%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(400px);}
}
@-moz-keyframes animations3{
  0%{-moz-transform:translate(0,0);}
  100%{-moz-transform:translate(400px);}
}
@keyframes animations3{
  0%{transform:translate(0,0);}
  100%{transform:translate(400px);}
}
 
.both span{
  -moz-animation:animations4 1s ease both;
  -webkit-animation:animations4 1s ease both;
  animation:animations4 1s ease both;
}
@-webkit-keyframes animations4{
  0%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(400px);}
}
@-moz-keyframes animations4{
  0%{-moz-transform:translate(0,0);}
  100%{-moz-transform:translate(400px);}
}
@keyframes animations4{
  0%{transform:translate(0,0);}
  100%{transform:translate(400px);}
}
</style>
</head>
<body>
<ul>
  <li class="none">
    <strong>none:</strong>
    <span></span>
  </li>
  <li class="forwards">
    <strong>forwards:</strong>
    <span></span>
  </li>
  <li class="backwards">
    <strong>backwards:</strong>
    <span></span>
  </li>
  <li class="both">
    <strong>both:</strong>
    <span></span>
  </li>
</ul>
</body>
</html>

上面的程式碼演示了animation-fill-mode四個屬性值的效果，下面再做一下簡單介紹:

（1）.none:預設情況下，動畫完成就會復位，當屬性值為none的時候，元素自然回到原始位置。

（2）.forwards:元素會最終停留在動畫的最後一幀的位置。

（3）.backwards:元素會在動畫完成後，回到動畫第一幀的位置。

（4）.both:有點"隨遇而安"的感覺，最後一幀或者第一幀都會被應用，也就是動畫在什麼時候結束，就停留在什麼位置。

下面單獨看一個關於both屬性值的程式碼例項: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:100px;
  height:100px;
  background:green;
  position:relative; 
   
  animation:theanimation 5s both; 
  -webkit-animation:theanimation 5s both; 
   
  animation-direction:alternate;
  -webkit-animation-direction:alternate;
   
  animation-iteration-count:3;
  -webkit-animation-iteration-count:3;
   
}
 
@keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-webkit-keyframes theanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼演示了both屬性值的功能。

大家可以自行修改一下animation-iteration-count屬性值，以便觀看效果。

相關文章