CSS3动画制作

CSS3动画制作

1. rotate 绕中心旋转
2. fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
3. fadeInUp2D 向上滑动并渐现， 因Animate.css的fadeInUp不支持iphone6 plus，自己用2d重写

效果如下：

详细代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS3动画制作</title>
    <style>
                .container {
                    width: 200px;
                    margin: 0 auto;
                }

                .redbox {
                    width: 100px;
                    height: 100px;
                    background-color: red;
                    margin: 50px auto;
                }

                .bluebox {
                    width: 100px;
                    height: 100px;
                    background-color: red;
                    margin: 50px auto;
                }

                .orangebox {
                    width: 100px;
                    height: 100px;
                    background-color: orange;
                    margin: 50px auto;
                }
                /*!
            2015.03.21 Nelson Kuang
        */

                .animated {
                    -webkit-animation-duration: 1s;
                    animation-duration: 1s;
                    -webkit-animation-fill-mode: both;
                    animation-fill-mode: both;
                }

                    .animated.infinite {
                        -webkit-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                    }

                /*
            @creator: Nelson Kuang
            @name: rotate 绕中心旋转
            @usage: <div class="rotate infinite animated">Example</div>
            */
                @-webkit-keyframes rotate {
                    from {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        -webkit-transform: rotate(-360deg);
                        transform: rotate(-360deg);
                    }

                    to {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        -webkit-transform: rotate(0deg);
                        transform: rotate(0deg);
                    }
                }

                @keyframes rotate {
                    from {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        -webkit-transform: rotate(-360deg);
                        transform: rotate(-360deg);
                    }

                    to {
                        -webkit-transform-origin: center;
                        transform-origin: center;
                        -webkit-transform: rotate(0deg);
                        transform: rotate(0deg);
                    }
                }

                .animated.rotate {
                    -webkit-animation-name: rotate;
                    animation-name: rotate;
                    -webkit-animation-timing-function: linear;
                    animation-timing-function: linear;
                    -webkit-animation-duration: 4s;
                    animation-duration: 4s;
                }

                /*
            @creator: Nelson Kuang
            @name: fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
            @usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInPendingFadeOutUp">Example</div>
            */
                @-webkit-keyframes fadeInPendingFadeOutUp {
                    0% {
                        opacity: 0;
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }

                    25% {
                        opacity: 1;
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }

                    75% {
                        /*pending*/
                        opacity: 1;
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                    }

                    100% {
                        opacity: 0;
                        -webkit-transform: translate3d(0, -100%, 0);
                        transform: translate3d(0, -100%, 0);
                    }
                }

                @keyframes fadeInPendingFadeOutUp {
                    0% {
                        opacity: 0;
                    }

                    25% {
                        opacity: 1;
                    }

                    75% {
                        /*pending*/
                    }

                    100% {
                        opacity: 0;
                        -webkit-transform: translate3d(0, -100%, 0);
                        transform: translate3d(0, -100%, 0);
                    }
                }

                .animated.fadeInPendingFadeOutUp {
                    -webkit-animation-duration: 4s;
                    animation-duration: 4s;
                    -webkit-animation-name: fadeInPendingFadeOutUp;
                    animation-name: fadeInPendingFadeOutUp;
                }
                /*
            @creator: Nelson Kuang
            @name: fadeInUp2D 向上滑动并渐现， 因Animate.css的fadeInUp不支持iphone6 plus，自己用2d重写
            @usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInUp2D">Example</div>
            */
                @-webkit-keyframes fadeInUp2D {
                    from {
                        opacity: 0;
                        -webkit-transform: translateY(100%);
                        transform: translateY(100%);
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: translateY(0);
                        transform: translateY(0);
                    }
                }

                @keyframes fadeInUp2D {
                    from {
                        opacity: 0;
                        -webkit-transform: translateY(100%);
                        transform: translateY(100%);
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: translateY(0);
                        transform: translateY(0);
                    }
                }

                .animated.fadeInUp2D {
                    -webkit-animation-duration: 4s;
                    animation-duration: 4s;
                    -webkit-animation-name: fadeInUp2D;
                    animation-name: fadeInUp2D;
                }
    </style>
</head>
<body>
    <div class="container">
        <div class="redbox infinite rotate"></div>
        <div class="bluebox fadeInPendingFadeOutUp"></div>
        <div class="orangebox fadeInUp2D"></div>
    </div>
    <script>
        var objs = document.querySelectorAll(".container>div");
        for (var k = 0, length = objs.length; k < length; k++) {
            objs[k].onclick = function () {
                var This = this; removeClass(This, 'animated'); setTimeout(function () { addClass(This, 'animated'); }, 100);
            }
        }
        function hasClass(obj, cls) {
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
        }
        function addClass(obj, cls) {
            if (!hasClass(obj, cls)) {
                obj.className = obj.className.replace(/(^\s*)|(\s*$)/g, "");
                obj.className += " " + cls;
            }
        }
        function removeClass(obj, cls) {
            if (hasClass(obj, cls)) {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                obj.className = obj.className.replace(reg, ' ');
            }
        }

    </script>
</body>
</html>