<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. （二）在.net中如何使用Memcached

    Step1:第一步当然是下载Memcached for c# API,

  2. StartUML破解

    破解文件路径如今下: .../StarUML/www/license/node/LicenseManagerDomain.js 使用文本编辑器打开,红色字体为添加内容: function valida ...

  3. 第二步 在D2RQ平台上配置jena环境

    第二步 在D2RQ平台上配置jena环境 2013年10月16日 9:48:53 搞了这么长时间语义,只用过protege这样的工具,一直没有落实到实际代码上.jena也看过好久了,总认为是hp公司的 ...

  4. 第三周作业、实时操作系统µC/OS介绍及其它内容

    作业要求 见<实时控制软件设计>第三周作业 1 阅读笔记--µC/OS 1.1 基本介绍 µC/OS是由Micrium公司研发的实时操作系统,以µC/OS-II或µC/OS-III为内核, ...

  5. mysql 不支持innodb的问题解决

    在新的机器上安装了mysql后,发现里面新创建的数据表的存储引擎都是myisam,于是 执行下面语句,把mysiam改为innodb. alter table tbl_test engine=inno ...

  6. HDU 3259 Wormholes

    题意:就是给你一个n,m,t   n代表有多少个点.m代表有多少个双向的边  t代表的是虫洞.如今要你判读是否还能够穿越到过去的点 虫洞的意思是给你的边是单向的,而且是负权值(输入的时候是正数) 思路 ...

  7. 走进C++程序世界-----继承和派生（2）

    覆盖基类的函数 覆盖基类函数顾名思义就是在派生类中对基类的函数进行的重新定义.这里将会讲到下面的2个知识点: 1.隐藏基类的方法 2.调用基类的方法(隐式和显示调用基类的方法) /* *derive2 ...

  8. WINFORM跟随WPF窗体移动

    <Window x:Name="mainWindow1" x:Class="WpfApplication9.MainWindow"         xml ...

  9. PagerSlidingTabStrip

    https://github.com/jpardogo/PagerSlidingTabStrip     

  10. HTML增加删除邮件（table)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...