animation-fill-mode屬性怎麼用
- 青灯夜游原創
- 2019-02-01 11:27:313846瀏覽
animation-fill-mode屬性是用於當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式，即其動畫效果是否可見。
CSS3 animation-fill-mode屬性
作用：animation- fill-mode 屬性規定動畫在播放前或播放後，其動畫效果是否可見。
說明：預設情況下，CSS 動畫在第一個關鍵影格播放完之前不會影響元素，在最後一個關鍵影格完成後停止影響元素。 animation-fill-mode 屬性可重寫該行為。
語法：
animation-fill-mode : none | forwards | backwards | both;
none：不改變預設行為。
forwards： 當動畫完成後，請保持最後一個屬性值（在最後一個關鍵影格中定義）。
backwards：在 animation-delay 所指定的一段時間內，在動畫顯示之前，套用開始屬性值（在第一個關鍵影格中定義）。
both：向前和向後填滿模式都被應用。
附註：Internet Explorer 9 以及更早的版本不支援 animation-fill-mode 屬性。
CSS3 animation-fill-mode屬性的使用範例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:2;
animation-fill-mode:forwards;
/* Safari 和 Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:2;
-webkit-animation-fill-mode:forwards;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果圖：
以上是animation-fill-mode屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn