新闻资讯
看你所看,想你所想

animation-fill-mode

2021-07-12 03:20:03分类：首页 > 百科评论()
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:

转载请注明出处安可林文章网 » animation-fill-mode

相关推荐

    声明：此文信息来源于网络，登载此文只为提供信息参考，并不用于任何商业目的。如有侵权，请及时联系我们：fendou3451@163.com