<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. Android开源git40个App源码

    http://www.itbbu.com/1039.html (JamsMusicPlayer)很棒的音乐播放器(new)   (F8)日程安排的软件   (Conversations)基于XMPP的 ...

  2. Java 加密 AES 对称加密算法

    版权声明:本文为博主原创文章,未经博主允许不得转载. [AES] 一种对称加密算法,DES的取代者. 加密相关文章见:Java 加密解密 对称加密算法 非对称加密算法 MD5 BASE64 AES R ...

  3. java08 Set

    Set: 无序不可重复,重复则覆盖,判断是不是重复也是通过equals方法判断的.HashSet和TreeSet,HashSet底层是HashMap. public static void main( ...

  4. .Net设计模式_工厂模式(3)

    3.抽象工厂模式 引言: 我们知道汽车需要很多部件才能组装成一辆成品的车,那么我们需要汽车厂生产很多东西,如:马达.车轴.轮胎等,这些东西组装起来后成为了一辆车. 这些东西就是产品族,图解:(出之ht ...

  5. PHP读书笔记（1）-PHP语法结构与变量

    一 .php基础语法 1.php语法结构 标准风格:<?php code; ?>.PHP每句代码用;(分号)结尾.<---就用这个,其他的看看就可以了 短风格:<? code; ...

  6. web项目设计与开发——DBHelper

    学习web项目设计与开发主要是在上学期web程序开发的基础上添上了思想和更深的理解. 在学习之前,我们需要下载好相关的软件——MyEclipse以及配置文件JDK.tomcat.再添加除MyEclip ...

  7. php加载memcache

    安装php加载memcache[root@web-server ~]# rpm -qa | grep libevent [root@web-server ~]# yum -y install libe ...

  8. SQL SERVER HTTP请求

    --开启Sql Server 通讯配置-- sp_configure ; GO RECONFIGURE WITH OVERRIDE; GO sp_configure ; GO RECONFIGURE ...

  9. javaweb入门20160305---xml的解析入门

    一个XML文件除了我们人去读写以外,我们希望可以通过程序去读写,利用程序去增删改查XML的过程就是XML编程 CRUD:Create.Read.Update.Delete   XML的两种解析方式 d ...

  10. Flie类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...