css animation-fill-mode屬性怎麼用
- (*-*)浩原創
- 2019-05-28 18:06:043176瀏覽
animation-fill-mode 屬性規定動畫在播放前或播放後，其動畫效果是否可見。
註解：其屬性值是由逗號分隔的一個或多個填滿模式關鍵字。
語法
animation-fill-mode : none | forwards | backwards | both;
| #描述 |
|
| none |
不改變預設行為。 |
| forwards |
當動畫完成後，保持最後一個屬性值（在最後一個關鍵影格中定義）。 |
| backwards |
#在animation-delay 所指定的一段時間內，在動畫顯示之前，套用開始屬性值（在第一個關鍵幀中定義）。 |
| both |
#向前和向後填滿模式都應用。 |
實例
為 h1 元素規定填入模式：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-fill-mode: forwards;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}以上是css animation-fill-mode屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn