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. Ubuntu Server 14.04 集成

    方便工作出差显示项目整合了下平时常用软件: OS: Ubuntu Server 14.04 VM:VMware Workstation 12.1.0 (不同版本好像会不兼容) 已经安装软件: 1. s ...

  2. QuartusII Design partion and logic lock

    Design partion Design partion常用于“增益变量(QIC)”,通过Design Partition对子模块进行“逻辑分区”,在Design Partition Window中 ...

  3. 2012Chhengdu K - Yet Another Multiple Problem

    K - Yet Another Multiple Problem Time Limit:20000MS     Memory Limit:65536KB     64bit IO Format:%I6 ...

  4. Linux学习之五--常用操作

    文件操作: rm命令 删除文件夹实例:rm -rf /var/log/httpd/access将会删除/var/log/httpd/access目录以及其下所有文件.文件夹 2 删除文件使用实例:rm ...

  5. HTML CSS 特殊字符表（转载）

    转载地址:http://blog.csdn.net/bluestarf/article/details/40652011 转载原文地址:http://zhengmifan.com/news/noteb ...

  6. overridePendingTransition简介

    1 Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画. 它包括两个部分:一部分是第一个activity退出时的动画:另外一部分时第二个activity进入时 ...

  7. 【河北省队互测】 gcd BZOJ 2818

    Description 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的 数对(x,y)有多少对. Input 一个整数N Output 如题 Sample Input 4 Sa ...

  8. 触发bfd 的条件

    满足下列条件之一就可触发BFC [1]根元素,即HTML元素 [2]float的值不为none [3]overflow的值不为visible [4]display的值为inline-block.tab ...

  9. 三妹，我拆了你的本-- Day One（大图赏）

    从垃圾箱中捡到了三妹的笔记本,虽然显卡已烧,硬盘和内存已被掳走,但依旧很高兴的说,因为我的目的是要拆了它. 这是我的第一次,所以本文的内容完全是新手猎奇,高手勿喷~ 步骤1:拆掉塑料外壳 不要忘了硬盘 ...

  10. PowerDesigner通过SQL语句生成PDM文件

    前提: 我用的是PowerDesigner15 数据库为Mysql5.5 步骤如下: 第一步:File->New Model 点击OK创建模板就行了 备注:在创建物理模型时DBMS下拉框是空的, ...