返回列表

CSS3动画(五)

默认分类 2013/11/02 18:44

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>