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>

CSS3动画制作的更多相关文章

  1. 简单CSS3动画制作

    本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...

  2. CSS3动画制作的简单示例

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  3. css3动画制作工具

    1.从chrome webstore下载 chrome应用商店安装地址 2.直接下载crx文件 如果无法访问到chrome的应用商城,可以选择下载app.crx文件,在chrome中打开chrome: ...

  4. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  5. CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  6. 使用transform和transition制作CSS3动画

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  7. CSS3咖啡制作全过程动画

    CSS3咖啡制作全过程动画是一款利用纯CSS3实现的咖啡制作全过程动画特效,从把咖啡豆导入杯子,到把咖啡煮好,整个动画还比较流畅. 源码:http://www.huiyi8.com/sc/8788.h ...

  8. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  9. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

随机推荐

  1. Kinect开发资源汇总

    Kinect开发资源汇总   转自: http://www.sigvc.org/bbs/forum.php?mod=viewthread&tid=254&highlight=kinec ...

  2. java实现二叉树

    栈在遍历的时候不能使用for循环,因为他的size函数在动态变小.

  3. 3D游戏编程大师技巧──2D引擎的编译问题

    接上一篇文章,这里将介绍2D引擎的编译,从现在开始才真正进入<3D游戏编程大师技巧>的学习.本书的第一.二章只是简介了游戏编程和windows编程,从第三章开始才是介绍<window ...

  4. JS打开新页面跳转

      有时候使用js进行页面跳转,想使用 a 标签中 target="_blank" 形式,跳转打开一个新的页面. 可以使用以下脚本,创建一个 a标签,然后模拟点击操作. 代码如下: ...

  5. angularjs 中的setTimeout(),setInterval() / $interval 和 $timeout

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后 ...

  6. DuBrute 3.1

    PS:转载自小残博客. 今天发现时隔很久的DuBrute竟然更新了,为此我在分享给大家,软件我没测试效果,使用过的朋友或许很清楚,不会太差! 曾几何时,小残也在用DUbrute爆破工具,且玩的不亦乐乎 ...

  7. JS学习-创建对象

    1.标准创建对象模式 var person = new Object(); person.name = "Nicholas"; person.age = 29; person.jo ...

  8. 如何将Sphinx生成的html文档集成进入Django

    参考 http://stackoverflow.com/questions/10594618/django-and-sphinx-how-to-view-the-html-sphinx-generat ...

  9. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  10. java反射

    知识点1:获取类字节码的三种形式 1.Class date = Date.class;//根据类名获取字节码 2.Date date= new Date(); date.getClass();//对象 ...