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. SQL Server数据库SP命令祥解

    1.数据库: (1)sp_helpdb:报告有关指定数据库或所有数据库的信息.例:sp_helpdb   --显示所有数据库信息(名称.大小等)例:sp_helpdb Recruitment   -- ...

  2. Python中模块安装文件的创建及使用

    在Python编程中,我们常常需要自己编写模块,当模块文件写好了,就需要创建安装文件,方便模块的发布. 此时,常用的方法,就是使用Python distutils(代表distribution uti ...

  3. JS获取元素CSS值

    一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...

  4. $q -- AngularJS中的服务（理解）

      描述 译者注: 看到了一篇非常好的文章,如果你有兴趣,可以查看: Promises与Javascript异步编程 , 里面对Promises规范和使用情景,好处讲的非常好透彻,个人觉得简单易懂. ...

  5. 使用spring的AOP时产生的异常

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'userService' ...

  6. ASP.NET MVC 5 使用autofac实现DI

    使用Nuget添加Autofac.MVC的引用 启动项设置 注册Controller 注册ModelBinder 注册相关的web abstraction 为View层启用属性注入 为Action F ...

  7. JS Date.parse() 函数详解

    Date.parse()函数用于分析一个包含日期的字符串,并返回该日期与 1970 年 1 月 1 日午夜之间相差的毫秒数. 该函数属于Date对象,所有主流浏览器均支持该函数. 语法 Date.pa ...

  8. CorelDRAW x6 X8安装失败解决方法

    CorelDRAW x6 X8自定义安装时,到最后经常会出现以下问题: 解决方法如下: 在自定义安装时,出现以下这个界面时,点击红色箭头的地方 将下图红色箭头指向的选项,点击取消,不要选上,即可解决安 ...

  9. Python之Web框架Django

    Python之Web框架: Django 一. Django Django是一个卓越的新一代Web框架 Django的处理流程 1. 下载地址  Python 下载地址:https://www.pyt ...

  10. iOS delegate

    有两个scene,分别为Scene A和Scene B.Scene A上有一个UIButton(Button A)和一个UILable(Lable A):Scene B上有一个UITextFiled( ...