30分钟玩转css3动画， transition，animation

浏览数：43 / 时间：2015年06月09日

其实css3动画是就是2种实现，一种是transition，另一种就是animation。transition实现的话就是只能定制开始帧，和结束2帧；而animation实现的话可以写很多关键帧。
没有前戏，直进主题。

transition

包含4个值，例如：-webkit-transition:all .5s ease 1s;
分别顺序是(m代表必须)：变换的属性(m)、变换过渡的时间(m)、变换的速率、变换延时执行的时间。
来个小demo：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        .transition {
            width:30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
            display: inline-block;
            background:lightblue;
            -webkit-transition:all .5s ease;
            transition:all .5s ease;
            color:#fff;
        }
        .transition:hover {
            -webkit-transform:rotate(360deg);
            transform:rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="transition">×</div>
</body>
</html>

应用例子：
http://skyweaver213.github.io/slide/widget/slide2/slide.html
http://skyweaver213.github.io/slide/widget/slide3/slide.html

animation：

就是一个动画对应一个keyframes，然后一个keyframes 里可以有N多个关键帧。
例如一个keyframes里我们可以这样写：

@-webkit-keyframes go {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(500px);
    }
}

然后我们需要在应用这个keyframes的元素上写一个animation,
例如：-webkit-animation:go 2.5s ease infinite 0;
参数顺序分别是(m代表必须)：动画名字(m)、执行的时间(m)、过渡的速率、执行多小次、延迟执行的时间

小demo：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .animation {
            width: 100px;
            height: 100px;
            display: block;
            background: pink;
            -webkit-animation: go 2.5s infinite;
            /*-webkit-animation: go 2.5s cubic-bezier(.25, -0.25, .75, 1.25) infinite;*/
        }

        @-webkit-keyframes go {
            0%, 100% {
                -webkit-transform: translateX(0);
            }
            50% {
                -webkit-transform: translateX(500px);
            }
        }
    </style>
</head>
<body>

<div class="animation"></div>

</body>
</html>

应用deom：loading状态、三条线变箭头。
http://skyweaver213.github.io/slide/widget/slide1/slide.html
技术分享

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .loading {
            position: relative;
            width: 40px;
            height: 40px;
            margin: 40px auto;
            -webkit-transform:rotate(165deg);
        }
        .loading:before, .loading:after {
            content: ‘‘;
            position: absolute;
            width: 8px;
            height: 8px;
            top: 50%;
            left: 50%;
            display: inline-block;
            border-radius: 4px;
            -webkit-transform: translate(-50%, -50%);
        }
        .loading:before {
            -webkit-animation:before 2s infinite;
        }
        .loading:after {
            -webkit-animation:after 2s infinite;
        }

        @-webkit-keyframes before {
            0% {
                width: 8px;
                box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);
            }

            35% {
                width: 40px;
                box-shadow: 0 -8px rgba(225, 20, 98, 0.75), 0 8px rgba(111, 202, 220, 0.75);
            }

            70% {
                width: 8px;
                box-shadow: -16px -8px rgba(225, 20, 98, 0.75), 16px 8px rgba(111, 202, 220, 0.75);
            }

            100% {
                box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);
            }
        }

        @-webkit-keyframes after {
            0% {
                height: 8px;
                box-shadow: 8px 16px rgba(61, 184, 143, 0.75), -8px -16px rgba(233, 169, 32, 0.75);
            }

            35% {
                height: 40px;
                box-shadow:8px 0 rgba(61, 184, 143, 0.75),-8px 0 rgba(233, 169, 32, 0.75);
            }

            70% {
                height: 8px;
                box-shadow:  8px -16px rgba(61, 184, 143, 0.75), -8px 16px rgba(233, 169, 32, 0.75);
            }

            100% {
                box-shadow:  8px 16px rgba(61, 184, 143, 0.75),  -8px -16px rgba(233, 169, 32, 0.75);
            }
        }

    </style>
</head>
<body>
    <div class="loading"></div>
</body>
</html>

变换成箭头：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .arrow_div {
            width: 100px;
            height: 100px;
            background: #000;
            position: relative;
        }
        .arrow {
            width: 33px;
            height: 4px;
            display: inline-block;
            background: #fff;
            position: absolute;
            left:0;
            right:0;
        }

        .arrow_body {
            margin: auto;
            top:40px;
            -webkit-animation: 2s linear body_kf infinite;
        }

        @-webkit-keyframes body_kf {
            0% {

            }
            30%, 50% {
                -webkit-transform: rotate(180deg);
            }
            80%, 100% {
                -webkit-transform: rotate(360deg);
            }


        }

        .sleft {
            width: 33px;
            height: 33px;
            border: transparent;
            position: absolute;
            top: 25px;
            margin: 0 auto;
            left: 0;
            right: 0;
            -webkit-animation: 2s linear sleft_kf infinite;
        }
        .sleft:before {
            content: ‘‘;
            width: 33px;
            height: 4px;
            display: inline-block;
            background: #fff;
            top: 0;
            position: absolute;
            -webkit-animation: 2s linear sleft_before_kf infinite;
        }
        @-webkit-keyframes sleft_kf {
            0% {}
            30%, 50% {
                -webkit-transform: rotate(222deg);
            }
            80%,100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes sleft_before_kf {
            0%, 100%{}
            20% {
                width: 28px;
                top: 1px;
                left: 3px;
            }
            25% {
                width: 26px;
                top: 2px;
                left: 6px;
            }
            30%, 40%, 50% {
                width: 22px;
                top: 3px;
                left: 8px;
            }
            80% {
                width: 33px;
                top:0;
                left:0;
            }
        }
        .sright {
            width: 33px;
            height: 33px;
            border: transparent;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            top: 25px;
            position: absolute;
            -webkit-animation: 2s linear sright_kf infinite;

        }

        .sright:before {
            content: ‘‘;
            width: 33px;
            height: 4px;
            display: inline-block;
            background: #fff;
            bottom: 0;
            position: absolute;
            -webkit-animation: 2s linear sright_before_kf infinite;
        }
        @-webkit-keyframes sright_kf {
            0% {}
            30%, 50% {
                -webkit-transform: rotate(135deg);
            }
            80%,100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes sright_before_kf {
            0%,100% {}
            20% {
                width: 28px;
                bottom: 1px;
                right: 1px;
            }
            25% {
                width: 25px;
                bottom: 2px;
                right: 2px;
            }
            30%, 40%, 50% {
                width: 22px;
                bottom: 3px;
                right: 3px;
            }

            80% {
                width: 33px;
                bottom: 0;
                right:0;
            }
        }

    </style>
</head>
<body>
    <div class="arrow_div">
        <div class="sleft"></div>
        <i class="arrow arrow_body"></i>
        <div class="sright"></div>
    </div>
</body>
</html>