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. [Objective-c开源库]HHRouter

    ---恢复内容开始--- 目的 统一客户端内部和外部跳转处理,支持传参数 代码 添加vc,block映射 针对路径做映射,如/user/:userId -> UserViewController ...

  2. Ajax我选择这样入门

    什么是AJAX? AJAX的意思就是异步的JavaScript和XML.简而言之,它是使用XMLHttpRequest对象与服务器端通信的脚本语言.它可以发送及接收各种格式的信息,包括JSON.XML ...

  3. [转]MySQL索引背后的数据结构及算法原理

    摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...

  4. 2013 Asia Regional Changchun C

    Little Tiger vs. Deep Monkey Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K ( ...

  5. C/C++头文件使用 #ifndef #define #endif 的原因

    背景 在编译的时候,出现"redefine"的错误,最后检查才发现对应的头文件没有写正确的预编译信息: #ifndef _HeadFileName_H #define _HeadF ...

  6. nmq消息队列解析

    消息中间件NMQ 1.What is nmq? nmq = new message queue; 一个通用消息队列系统 为在线服务设计 什么是消息队列?问什么需要?有哪些功能? 消息队列的本质:1.多 ...

  7. ResultSet can not re-read row data for column 1.

    error:ResultSet can not re-read row data for column 1. 将数据类型改为varchar(max)后,查询数据错误 改正:将jdbc驱动改为jtds驱 ...

  8. laravel数据库迁移(三)

    laravel号称世界上最好的框架,数据库迁移算上一个,在这里先简单入个门: laravel很强大,它把表中的操作写成了migrations迁移文件,然后可以直接通过迁移文件来操作表.所以 , 数据迁 ...

  9. LUA中将未分类数据分为测试集和训练集

    require 'torch' require 'image' local setting = {parent_root = '/home/pxu/image'} function list_chil ...

  10. r-cnn学习（九）：学习总结

    首先看下代码文件夹的说明(这部分转自:http://blog.csdn.net/bailufeiyan/article/details/50749694) tools 在tools文件夹中,是我们直接 ...