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. Java 中的 ReadWriteLock 是什么？

    读写锁是用来提升并发程序性能的锁分离技术的成果.

  2. ZAB 协议？

    ZAB 协议是为分布式协调服务 Zookeeper 专门设计的一种支持崩溃恢复的原子广 播协议. ZAB 协议包括两种基本的模式:崩溃恢复和消息广播. 当整个 zookeeper 集群刚刚启动或者 L ...

  3. Spring源码分析笔记--事务管理

    核心类 InfrastructureAdvisorAutoProxyCreator 本质是一个后置处理器,和AOP的后置处理器类似,但比AOP的使用级别低.当开启AOP代理模式后,优先使用AOP的后置 ...

  4. scrapy基于请求传参实现深度爬取

    请求传参实现深度爬取 请求传参: 实现深度爬取:爬取多个层级对应的页面数据 使用场景:爬取的数据没有在同一张页面中 在手动请求的时候传递item:yield scrapy.Request(url,ca ...

  5. 学习Puppet（二）

    puppet的工作流程 1.简介 puppet是一种采用C/S星状结构的linux.Unix平台的集中配置管理系统.puppet拥有自己的语言,可管理配置文件.用户.cron任务.软件包.系统服务等. ...

  6. 为什么HTTP/3要基于UDP？可靠吗？

    目录 前言 为什么转用UDP? HTTP/3解决了那些问题? 队头阻塞问题 QPACK编码 Header 参考 推荐阅读: 计算机网络汇总 HTTP/3竟然是基于UDP的!开始我也很疑惑,UDP传输不 ...

  7. 《手把手教你》系列基础篇（八十四）-java+ selenium自动化测试-框架设计基础-TestNG日志-上篇（详解教程）

    1.简介 TestNG还为我们提供了测试的记录功能-日志.例如,在运行测试用例期间,用户希望在控制台中记录一些信息.信息可以是任何细节取决于目的.牢记我们正在使用Selenium进行测试,我们需要有助 ...

  8. hanoi（汉诺塔）递归实现

    汉诺塔:汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下面开始按大小顺序 ...

  9. 浅谈Nodejs应用的主文件index.js的组成部分

    前言 Node妹子的问世,着实让我们前端攻城狮兴奋了一把,尤其本屌听说Javascript可以写服务端后,兴奋的像是看到了二次元萝莉的胖子...(●'◡'●).呃哼...YY先到这里,原谅本屌是个二次 ...

  10. 小程序图片轮播特效swiper(纯手打)

    前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序,做了几款小程,跑了不少坑, 也会陆续在后面几节跟大家分享. 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的 ...