<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. JSON基本操作

    import org.json.simple.JSONArray; import org.json.simple.JSONObject; import org.json.simple.parser.J ...

  2. 用document.title=“xxx”动态修改title，在ios的微信下面不生效

    单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title.常规做法如下,可惜在iO ...

  3. get和post，session和cookie的一些说明

      1.GET和POST的区别 A. 从字面意思和HTTP的规范来看,GET用于获取资源信息而POST是用来更新资源信息. B. GET提交请求的数据实体会放在URL的后面,用?来分割,参数用& ...

  4. JBPM学习(三)：管理流程定义

    概念: ProcessDefinition,流程定义:一个流程的步骤说明,如一个请假流程.报销流程.是一个规则. ProcessDefinition,流程定义对象,是解析.jpdl.xml文件得到流程 ...

  5. redis远程连接超时

     今天在用jedis连接远程的redis时,抛出连接超时异常:connect timed out. 详细信息例如以下: Exception in thread "main" r ...

  6. 111_leetcode_Best Time to Buy and Sell Stock III

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  7. PullToRefreshScrollView 修改下拉刷新图标

    我的修改比较简单暴力.网上查了一番,貌似大家都没有改,无奈,查了一下源码.发现如下资源目录: 在看看我们的布局文件,此三个图片就是下拉刷新的三种图标 好吧,flip就是我目前的下拉刷新图片,对应的也就 ...

  8. 详解QUiLoader 动态加载.ui文件

    http://blog.chinaunix.net/uid-13838881-id-3652523.html 1.适用情况: 动态加载UI文件是指,用 Qt Designer 通过拖拽的方式生产.ui ...

  9. haproxy部署及配置

    HAProxy介绍 (1)HAProxy 是一款提供高可用性.负载均衡以及基于TCP(第四层)和HTTP(第七层)应用的代理软件,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. HAProxy特 ...

  10. 通过配置tomcat虚拟路径配置站点的静态资源

    我们常常站点中会提供给用户上传文件.图片.视频或者诸如为了提高性能生成的静态文件等存储在站点应用中.但如果静态资源文件和项目文件在同一个目录下,当我们重新部署文件时,war重新解压会导致静态资源文件的 ...