http://ued.ctrip.com/blog/wp-content/webkitcss/demo/animation-fill-mode.html
http://ued.ctrip.com/blog/wp-content/webkitcss/prop/animation-fill-mode.html
<style>
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);}
}
</style>
<h1>animation-fill-mode：</h1>
<ul>
<li class="none">
<strong>none: </strong>
<span></span>
</li>
<li class="forwards">
<strong>forwards: </strong>
<span></span>
</li>
<li class="backwards">
<strong>backwards: </strong>
<span></span>
</li>
<li class="both">
<strong>both: </strong>
<span></span>
</li>
</ul>