<html>    <head>        <title>css3动画delay为负值时的效果</title>        <meta charset="UTF-8"/>        <style type="text/css">            .he{                width: 400px;                height: 200px;                background: #eee;                margin: 0 auto;                text-align: center;                line-height: 200px;            }            .he div{                width: 4px;                height: 30px;                background-color: green;                display: inline-block;                animation-name: myniy;                animation-duration: 1.2s;                animation-iteration-count: infinite;                -webkit-animation-name: myniy;                -webkit-animation-duration: 1.2s;                -webkit-animation-iteration-count: infinite;                -moz-animation-duration: 1.2s;                -moz-animation-name: myniy;                -moz-animation-iteration-count: infinite;                            }            .m1{                animation-delay: -1.1s;                -webkit-animation-delay: -1.1s;                -moz-animation-delay: -1.1s;            }            .m2{                animation-delay: -1.0s;                -webkit-animation-delay: -1.0s;                -moz-animation-delay: -1.0s;            }            .m3{                animation-delay: -0.9s;                -webkit-animation-delay: -0.9s;                -moz-animation-delay: -0.9s;            }            .m4{                animation-delay: -0.8s;                -webkit-animation-delay: -0.8s;                -moz-animation-delay: -0.8s;            }            .m5{                animation-delay: -0.7s;                -webkit-animation-delay: -0.7s;                -moz-animation-delay: -0.7s;            }            .m6{                animation-delay: -0.6s;                -webkit-animation-delay: -0.6s;                -moz-animation-delay: -0.6s;            }                        @keyframes myniy{                0%,30%,70%,100%{                    transform: scale(1,0.5);                }                50%{                    transform: scale(1);                }            }            @-webkit-keyframes myniy{                0%,30%,70%,100%{                    transform: scale(1,0.5);                }                50%{                    transform: scale(1);                }            }            @-moz-keyframes myniy{                0%,30%,70%,100%{                    transform: scale(1,0.5);                }                50%{                    transform: scale(1);                }            }        </style>    </head>    <body>        <div class="he">            <div class="m1"></div>            <div class="m2"></div>            <div class="m3"></div>            <div class="m4"></div>            <div class="m5"></div>            <div class="m6"></div>        </div>    </body></html>

运行效果图

animation-delay为负值时表示，动画跳过多少秒进入动画周期。

上面要注意的地方，关键帧对称

 0%,30%,70%,100%{
                    transform: scale(1,0.5);
                }
 50%{
                    transform: scale(1);
                }延迟为-（1.2-0.1）开始

css3动画使用技巧之——transform-delay为负值时的应用。的更多相关文章

  1. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

  2. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  3. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  4. CSS3动画属性：变形(transform)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 语法 t ...

  5. css3动画属性系列之transform细讲scale缩放

    下面我们从3个方面开始介绍: 1.scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数 Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的. ...

  6. css3动画属性系列之transform细讲旋转rotate

    1.语法: transform: none |  <transform-function> [<transform-function>]* 2.取值: none         ...

  7. CSS3动画理解与应用

    CSS3动画理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Anima ...

  8. css3中的变形（transform）、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

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

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

随机推荐

  1. null值是不会算在count以内的

    做统计的时候,null是不计算在count以内的.所以字段的值最好不要设置为null. 比如:select count(user_id) as beyond_num from fs_users_add ...

  2. 分布式存储Ceph的几种安装方法，源码，apt-get，deploy工具，Ubuntu CentOS

    最近搞了下分布式PB级别的存储CEPH  尝试了几种不同的安装,使用 期间遇到很多问题,和大家一起分享. 一.源码安装 说明:源码安装可以了解到系统各个组件, 但是安装过程也是很费劲的,主要是依赖包太 ...

  3. Android 入门第一课 一个简单的提示框

    1.打开Android开发环境Eclipse来到主界面 2.新建一个安卓项目 File->New->Android Application project 在上面有红色错误的地方填上应用程 ...

  4. HDU 3333 & 3874 (线段树+离线询问)

    两个题目都是求区间之内,不重复的数字之和,3333需要离散化处理................. 调试了一下午........说多了都是泪........... #include <iostr ...

  5. android selector 背景选择器的使用， button （未点击，点击，选中保持状态）效果实现

              android selector 背景选择器的使用, button (未点击,点击,选中保持状态)效果实现 首先看到selector的属性: android:state_focus ...

  6. 菜鸟学习-C语言函数参数传递详解-结构体与数组 分类： C/C++ Nginx 2015-07-14 10:24 89人阅读 评论(0) 收藏

    C语言中结构体作为函数参数,有两种方式:传值和传址. 1．传值时结构体参数会被拷贝一份,在函数体内修改结构体参数成员的值实际上是修改调用参数的一个临时拷贝的成员的值,这不会影响到调用参数.在这种情况下 ...

  7. String.Format使用方法

    1.作为參数   名称 说明   Format(String, Object) 将指定的 String 中的格式项替换为指定的 Object 实例的值的文本等效项.   Format(String, ...

  8. BS和CS对比

    BS和CS对比 牛腩新闻发布系统已经开始了不短的时间了,CS的项目也算是接触了下,接下来对比下CS和BS CS和BS是什么? C/S结构即Client/Server(客户机/服务器)结构,是大家熟知的 ...

  9. Monitoring and Tuning the Linux Networking Stack: Receiving Data

    http://blog.packagecloud.io/eng/2016/06/22/monitoring-tuning-linux-networking-stack-receiving-data/ ...

  10. 原创 Reflector 8.1　反激活

    今天下载了Reflector8.1,注册时不小心给注册成标准版了.郁闷,然后想反注册,结果人家的注册服务器不认你的注册码.怎么办? google.... 然后找到一篇 Deactivating you ...