animation-fill-mode

animation-fill-mode

animation-fill-mode是一個進程軟體，其屬性值是由逗號分隔的一個或多個填充模式關鍵字。

基本介紹

  • 中文名：動畫填充模式
  • 外文名：animation-fill-mode
  • 所屬語音：CSS
軟體支持,定義用法,語法,示例,

軟體支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation-fill-mode 屬性。Safari 和 Chrome 支持替代的道蜜 -webkit-animation-fill-mode 屬性。
注意：Internet Explorer 9 以及更早迎白她的版本不支持 animation-fill-mode 屬性。

定義用法

默認值：
none
繼承性：
no
版本：
CSS3
JavaScript 語法：
object.style.animationFillMode=none

語法

animation-fill-mode : none | forwards | backwards | both;
值描述
none
不改變默認行為。
forwards
當動畫完成後，保歸棗境持最後一個屬性值（在最後一個葛尋埋關鍵幀中定義）欠故奔。
backwards
在 animation-delay 所指定的一段時間內，在動畫顯示之前，套用開始屬性值（在第少講熱奔一個關宙匙祝挨鍵幀中定義）。
both
向前和向後填充模式都被套用。
參考資料

示例

h1 {
font - size: 16px;
}
li {
padding: 10px;
}
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: -o - linear - gradient(top, #fff, #F6D66E);
background: -ms - linear - gradient(top, #fff, #F6D66E);
background: linear - gradient(top, #fff, #F6D66E);
}.none span { - moz - animation: animations 1s ease; - webkit - animation: animations 1s ease; - o - animation: animations 1s ease; - ms - 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);
}
}@ - o - keyframes animations {
0 % { - o - transform: translate(0, 0);
}
100 % { - o - transform: translate(400px);
}
}@ - ms - keyframes animations {
0 % { - ms - transform: translate(0, 0);
}
100 % { - ms - 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; - o - animation: animations2 1s ease forwards; - ms - 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);
}
}@ - o - keyframes animations2 {
0 % { - o - transform: translate(0, 0);
}
100 % { - o - transform: translate(400px);
}
}@ - ms - keyframes animations2 {
0 % { - ms - transform: translate(0, 0);
}
100 % { - ms - 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; - o - animation: animations3 1s ease backwards; - ms - 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);
}
}@ - o - keyframes animations3 {
0 % { - o - transform: translate(0, 0);
}
100 % { - o - transform: translate(400px);
}
}@ - ms - keyframes animations3 {
0 % { - ms - transform: translate(0, 0);
}
100 % { - ms - 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; - o - animation: animations4 1s ease both; - ms - 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);
}
}@ - o - keyframes animations4 {
0 % { - o - transform: translate(0, 0);
}
100 % { - o - transform: translate(400px);
}
}@ - ms - keyframes animations4 {
0 % { - ms - transform: translate(0, 0);
}
100 % { - ms - transform: translate(400px);
}
}@keyframes animations4 {
0 % {
transform: translate(0, 0);
}
100 % {
transform: translate(400px);
}
}
animation - fill - mode：none: forwards: backwards: both:
}@ - 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);
}
}@ - o - keyframes animations {
0 % { - o - transform: translate(0, 0);
}
100 % { - o - transform: translate(400px);
}
}@ - ms - keyframes animations {
0 % { - ms - transform: translate(0, 0);
}
100 % { - ms - 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; - o - animation: animations2 1s ease forwards; - ms - 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);
}
}@ - o - keyframes animations2 {
0 % { - o - transform: translate(0, 0);
}
100 % { - o - transform: translate(400px);
}
}@ - ms - keyframes animations2 {
0 % { - ms - transform: translate(0, 0);
}
100 % { - ms - 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; - o - animation: animations3 1s ease backwards; - ms - 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);
}
}@ - o - keyframes animations3 {
0 % { - o - transform: translate(0, 0);
}
100 % { - o - transform: translate(400px);
}
}@ - ms - keyframes animations3 {
0 % { - ms - transform: translate(0, 0);
}
100 % { - ms - 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; - o - animation: animations4 1s ease both; - ms - 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);
}
}@ - o - keyframes animations4 {
0 % { - o - transform: translate(0, 0);
}
100 % { - o - transform: translate(400px);
}
}@ - ms - keyframes animations4 {
0 % { - ms - transform: translate(0, 0);
}
100 % { - ms - transform: translate(400px);
}
}@keyframes animations4 {
0 % {
transform: translate(0, 0);
}
100 % {
transform: translate(400px);
}
}
animation - fill - mode：none: forwards: backwards: both:

相關詞條

熱門詞條

聯絡我們