<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. PowerShell运行cmd命令

    1.使用.exe扩展名 2.使用 cmd /c "" 3.在 PowerShell v3 中有另一种选择来解决这个问题,只需在命令行的任意位置添加 –% 序列(两个短划线和一个百分 ...

  2. nginx redis tomcat 分布式web应用 session共享

    目标:多台tomcat 使用redis实现共享session.redis的安装请参阅:centos上安装redis nginx 作为目前最流行的开源反向代理HTTP Server,用于实现资源缓存.w ...

  3. patchdiff2 函数比较插件

    https://code.google.com/archive/p/patchdiff2/downloads

  4. careercup-树与图 4.4

    4.4 给定一棵二叉树,设计一个算法,创建含有某一深度上所有结点的链表(比如,若一棵树的深度为D,则会创建D个链表). 类似于leetcode:Populating Next Right Pointe ...

  5. Java基础知识强化之IO流笔记51：IO流练习之 键盘录入学生信息按照总分排序写入文本文件中的案例

    1.  键盘录入学生信息(姓名,语文成绩,数学成绩,英语成绩),按照总分排序写入文本文件中 分析:   A:创建学生类   B:创建集合对象      TreeSet<Student>   ...

  6. Mysql 半同步复制配置

    以下是配置和监控半同步复制: 1. 半同步复制功能以plugin的方式接入MySQL,需要在主库与从库两端同时开启半同步的支持,具体配置如下: On the master mysql> INST ...

  7. C#中的字符串

    1.    值类型与引用类型比较 classProgram { staticvoid Main() { int b = a;   //将a的副本给变量b b = 10; Console.WriteLi ...

  8. JQuery事件的绑定

    关于jQuery事件绑定html: <a href="#" onclick="addBtn()">addBtn</a> <div ...

  9. Sublime Text 使用简介

    Sublime Text使用介绍 如果说Notepad++是一款不错Code神器,那么Sublime Text应当称得上是神器滴哥.Sublime Text最大的优点就是跨平台,Mac和Windows ...

  10. MyEclipse2014中项目名更改后如何使用新的项目名部署到Tomcat中去

    在项目中调试的时候突然发现我复制的项目(项目名修改过了)部署在Tomcat中运行的时候还是显示的是原来的项目名,以至于我使用新的项目名称作为URL请求竟然是404,我去,当时感觉就不怎么好了. 当然, ...