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. 分布式session的实现

    一.分布式Session的几种实现方式 1.基于数据库的Session共享 2.基于NFS共享文件系统3.基于memcached 的session,如何保证 memcached 本身的高可用性?4. ...

  2. css中margin的应用

    1.margin用于设置外边距,没有继承性,父元素设置的margin属性子元素不会继承. 2.margin存在重叠的问题. 水平边距永远不会发生重叠. 垂直边距在特定情况下会重叠. 重叠问题都很容易解 ...

  3. 转载：gulp文件

    这是我的文件目录结构图  下面是我gulpfile.js的配置 'use strict' var gulp=require('gulp'); var gutil=require('gulp-util' ...

  4. WebForm控件--2016年12月29日

    简单控件 1.Label  =>   <span id="Label1">Label1</span> 2.Literal  =>  Text 填 ...

  5. php检测文件内容编码的方法

    核心用到的是mb_convert_encoding函数,示例代码如下: <?php header("Content-type: text/html; charset=utf-8&quo ...

  6. Unity 官网教程 -- Multiplayer Networking

    教程网址:https://unity3d.com/cn/learn/tutorials/topics/multiplayer-networking/introduction-simple-multip ...

  7. Docker - command in docker container

    1.查看Container 里面运行的进程 在运行容器以后,可以查看里面的进程: docker top <container_id> or <container_name> 2 ...

  8. 【阿里云配置端口开放】使用 iptables

    要知道: 1.目前(16年-12-10)阿里云主机只要有服务开启,所有端口是默认开启的.这样很不好,安全做法是,需要开启外网端口时,由开发人员去配置. 2.想要开放端口,就需要使用iptables命令 ...

  9. 360随身wifi在win10中连不上网络

    找到服务"Wired AutoConfig"和"WLAN AutoConfig"项,点击"启动"按钮,确保使其正常启动. 讲本地网卡共享到移 ...

  10. Python3实现火车票查询工具

    Python 实现火车票查询工具 一. 实验介绍 通过python3实现一个简单的命令行版本的火车票查询工具,用实际中的例子会更感兴趣,不管怎么样,既练习了又可以自己使用. 1.  知识点: Pyth ...