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. 学习RabbitMQ（五）

    消息中间件就是在消息的传输过程中保存消息的容器.消息中间件再将消息从它的源中继到它的目标时充当中间人的作用.队列的主要目的是提供路由并保证消息的传递:如果发送消息时接收者不可用,消息队列会保留消息,直 ...

  2. 学习heartbeat-01简介

    1.Heartbeat介绍 Heartbeat 是一个基于Linux开源的,被广泛使用的高可用集群系统,自1999年开始到现在,发布了众多版本,是目前开源Linux-HA项目最成功的一个例子,在行业内 ...

  3. 前端性能优化（Application Cache篇）

    正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 之前在segmentfault上刷问题看到一个关于manifest的问题,很好奇就研究了 ...

  4. 2015 年十佳 HTML5 应用

    前言 优秀的前端工程师戴着脚铐跳舞,究竟能把 HTML5 的体验推进到什么程度? 这些 Web apps 是我们运营云集浏览器的网上应用店一年来,我选出的十佳 Web apps.其中参考了同事们的意见 ...

  5. 该如何选择 background-image 和 img 标签

    用img标签 如果你希望别人打印页面时候包含这张图片请使用 img 标签 当这张图片有非常有意义的语义,比如警告图标,请使用img标签及它的alt属性.这样意味着你可以向所有的用户终端现实他的意义. ...

  6. SQL语句中关于日期的操作(非常的有用)

    在SQL Server 里的日期数据,我们经常可以用 字段<='2008-5-20'这样的表达式,但在oracle却不可以,因为数据类型不一样 字段是date型,'2008-5-20'是字符型, ...

  7. 【vue 开发】Vue中splice的使用

    splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组) index:数组开始下标 len: 替换/删除的长度 item:替换的值,删 ...

  8. java中Object类是怎么回事，干嘛使的？举例说明！

    Object类的作用:m a r k - t o-        w i n: 在java中,因为所有的类都有共性,所以java的缔造者们把java设计成这样:所有的类都是Object类的直接或间接子 ...

  9. Exchange日志清理

    1.清理日志--完整备份 Exchange Server 2013被部署在Windows Server 2012 及以上版本的操作系统中,使用操作系统内的"Windows Server Ba ...

  10. 实战-DRF快速写接口(认证权限频率)

    实战-DRF快速写接口 开发环境 Python3.6 Pycharm专业版2021.2.3 Sqlite3 Django 2.2 djangorestframework3.13 测试工具 Postma ...