animation: moveToRight .75s 6s linear  infinite ;
animation: moveToRight -.75s 1.5s  linear infinite;

当动画有两个参数时，
若是两个都是正整数，第一个是持续的时间，第二个是动画延迟时间；
若第一个是负数，则取该时间的绝对值视为延迟时间，第二个为持续时间。

虽然延迟动画为负数时可以取其绝对值为延迟时间，但负数有它存在的用意。如下动画，一刷新就会有一轮明显的白圈，那是在动画没有开始时元素的正常状态，在设置延迟时间为负数时就不会出现这样效果。

transform-origin: 0 25px;/* 这个属性决定环绕园大小 */

以上结论来自于研究该案例：https://github.com/huruji/loading 所得，感谢大佬无私分享。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            position: relative;

            padding: 80px;

            background-color: #ffaa00;

        }

        span {

            position: absolute;

            width: 50px;

            height: 50px;

            border-radius: 50%;

            background: transparent;

            border: 2px solid #fff;

        }

        /*  */

        span:nth-child(1) {

            animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) .24s infinite;

            /*animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) -.24s infinite;*/

        }

        span:nth-child(2) {

            animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) .12s infinite;

            /*animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) -.12s infinite;*/

        }

        span:nth-child(3) {

            animation: loader6 .8s cubic-bezier(0.21, 0.53, 0.56, 0.8) 0s infinite;

        }

        @keyframes loader6 {

            0% {-webkit-transform: scale(0.1);opacity: 0.1;}

            20% {-webkit-transform: scale(0.5);opacity: 1;}

            100% {-webkit-transform: scale(1);opacity: 0.5;}

        }

    </style>

</head>

<body>

    <div>

        <span></span>

        <span></span>

        <span></span>

    </div>

</body>

</html>

动画代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body {padding: 100px}

        .loader {

            width: 150px;

            font-size: 0;

            text-align: center;

            border: 1px solid #ffaa00;

        }

        span {

            display: inline-block;

            width: 15px;

            height: 15px;

            background-color: #EB4E01;

            border-radius: 50%;

        }

        span:first-child {

            animation: moveToLeft infinite 1.5s linear;

        }

        span:last-child {

            /*

            animation: moveToRight infinite .75s 6s linear;

            当动画有两个参数时，若是两个都是正整数，第一个是持续的时间，第二个是动画延迟时间；

            若第一个是负数，则取该时间的绝对值视为延迟时间，第二个为持续时间

            */

            /*

            也可：为什么是 .75s 呢，因为当动画在 50% 时其实可以看成一个来回结束，这个来回结束在总持续时间占一半。

            animation: moveToRight 1.5s .75s linear infinite;

            */

            animation: moveToRight -.75s linear 1.5s infinite;

        }

        @keyframes moveToLeft {

            0% {transform: translateX(0)}

            25% {transform: translateX(-30px)}

            50% {transform: translateX(0)}

            100% {transform: translateX(0)}

        }

        @keyframes moveToRight {

            0% {transform: translateX(0)}

            25% {transform: translateX(30px)}

            50% {transform: translateX(0)}

            100% {transform: translateX(0)}

        }

    </style>

</head>

<body>

<div class="loader">

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

</div>

</body>

</html>

案例

animation—延迟和持续时间的更多相关文章

  1. 第100天：CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  2. 动画Animation

    动画分类:Animation 单一动画 AnimationSet 复合动画 AnimationSet是Animation的实现子类,Animation是一个抽象类,他的实现子类主要有如下几种: 主要有 ...

  3. CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

  4. animation-fill-mode的一些思考

    animation-fill-mode是css3动画的一个属性,它能够控制元素在动画执行前与动画完成后的样式.一个带有延迟,并且按正常方向执行的动画(正常方向是指从0%运行到100%),执行一次的过程 ...

  5. CSS3重点总结

    CSS3重点总结(1)兄弟选择器:2种:+. ~ 1.相邻兄弟选择器(+):选择器1+选择器2 选择"选择器1"相邻的后一个兄弟"选择器2" 强调:选中的是自己 ...

  6. chrome开发工具指南（七）

    检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...

  7. CSS3动画详解（超详细）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  8. html css笔记zht

    第3章 Img标签 路径问题 绝对路径:从盘符(C:\)出发的路径 (C:\Users\......) linux(绝对路径以 / 开头) 相对路径:( ./ 当前文件所在的目录)( ../上一级目录 ...

  9. CSS3动画详解（图文教程）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

随机推荐

  1. volatile 类型变量提供什么保证？

    volatile 变量提供顺序和可见性保证,例如,JVM 或者 JIT 为了获得更好的性能 会对语句重排序,但是 volatile 类型变量即使在没有同步块的情况下赋值也不会 与其他语句重排序. vo ...

  2. 机器学习综合库gensim 简单搞定文本相似度

    不废话直接代码吧 # 1.模块导入 import jieba import gensim from gensim import corpora from gensim import models fr ...

  3. BMZCTF WEB_ezeval

    WEB_ezeval 进入环境,源码给出 <?php highlight_file(__FILE__); $cmd=$_POST['cmd']; $cmd=htmlspecialchars($c ...

  4. 一文读懂充电宝usb接口电路及制作原理详细

    转自:http://www.elecfans.com/dianlutu/dianyuandianlu/20180511675801.html USB充电器套件,又名MP3/MP4充电器,输入AC160 ...

  5. 前端工作面试HTML相关问题

    前端工作面试HTML相关问题 Q: doctype(文档类型)的作用是什么? A: 在HTML中 doctype 有两个主要目的. 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DT ...

  6. HTML5中dialog元素尝鲜

    对话框(别称模态框,浮层)是web项目中用于用户交互的重要部分,我们最常见的就是js中 alert(),confirm(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自 ...

  7. 关于sqlite数据库与sqlite studio

    今天使用了AS自带的sqlite实现了连接数据库,但是不能同步,比较麻烦,然后使用sqlite studio去设法实现同步,但是依旧无法创建成功,明天会继续调试.

  8. 基于Apache组件，分析对象池原理

    池塘里养:Object: 一.设计与原理 1.基础案例 首先看一个基于common-pool2对象池组件的应用案例,主要有工厂类.对象池.对象三个核心角色,以及池化对象的使用流程: import or ...

  9. 第一阶段：Java基础之变量

    1.实例变量 #实例变量只能在类种声明,必须在构造函数.方法.任何块之外 #实例变量只能通过创建对象使用,当使用new创建对象,实例变量也同时被创建,当垃圾回收器回收对象时,实例变量也被销毁 #当在堆 ...

  10. LC-数组-二分查找-704

    二分查找 [left, right] 方式 [left, mid -1] [mid + 1, right] int left = 0, right = nums.length - 1; while ( ...