标题：animation-fill-mode
简介
animation-fill-mode
语法：
animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]*
默认值：none
取值：
none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：
设置对象状态为动画结束或开始的状态
说明：
检索或设置对象动画时间之外的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationFillMode。
写法：
内核类型写法
Webkit(Chrome/Safari)-webkit-animation-fill-mode
Gecko(Firefox)-moz-animation-fill-mode
Presto(Opera)
Trident(IE)-ms-animation-fill-mode
W3Canimation-fill-mode
示例
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: [1]