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. dos 循环读取当前文件夹下的视频名字

    @echo off for /R %%i in (*.mp4) do ( echo -isma %%~nxi ) pause

  2. (转载)一篇文章带你分清楚JWT,JWS与JWE

    是JWS(JSON Web Signature),也往往导致了人们对于JWT的误解,但是JWT并不等于JWS,JWS只是JWT的一种实现,除了JWS外,JWE(JSON Web Encryption) ...

  3. 转载：STL常用容器的底层数据结构实现

    转载至:https://blog.csdn.net/qq_28584889/article/details/88763090 vector :底层数据结构为数组,支持快速随机访问 list:底层数据结 ...

  4. poi整合springboot超简单入门例子

    1.导入依赖 2.application.properties只需要数据库连接信息就可以 3.目录结构 有个没用的service,请忽略 4.Controller,因为入门列子,所以简单的导出 导入读 ...

  5. Matlab解析LQR与MPC的关系

    mathworks社区中的这个资料还是值得一说的. 1 openExample('mpc/mpccustomqp') 我们从几个角度来解析两者关系,简单的说就是MPC是带了约束的LQR. 在陈虹模型预 ...

  6. 前端调试利器 - Charles

    Docs 开发之 Charles 配置指南 1.下载与安装 charles-proxy-4.1.4 .dmg56.12 MB已存到云盘下载 2.激活 使用公司正版license 激活 安装证书 点击证 ...

  7. 微信小程序实时通讯（websocket）问题

    这几天值班忙的不要不要,人工智能这块看的都是零零散散,今天就来写写小程序的实时通讯吧.小程序端://这个是连接 lianjie:function(){ var socketOpen = false / ...

  8. ES6-11学习笔记--数组遍历

    ES5中数组遍历方式: for循环 forEach():没有返回值,只是针对每个元素调用func map():返回新的Array,每个元素为调用func的结果 filter():返回符合func条件的 ...

  9. 2020极客大挑战Web题

    前言 wp是以前写的,整理一下发上来. 不是很全. 2020 极客大挑战 WEB 1.sha1碰撞 题目 图片: 思路 题目说,换一种请求方式.于是换成post.得到一给含有代码的图片 图片: 分析该 ...

  10. RFC 标准文档

    RFC 标准文档 什么是 RFC ? RFC(Request For Comments)意即"请求评论",包含了关于Internet的几乎所有重要的文字资料.如果你想成为网络方面的 ...