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. 如何创建spring web 工程

    在项目资源管理器右键,New-Spring Starter Proje 设置一些参数 点击Next,然后勾选两个选项

  2. 用maven建立一个工程5

    在命令行里面输入cd myapp再按回车 再输入mvn compile再按回车 再输入 cd target按回车 再输入cd../按回车 再输入mvn package按回车 最后输入java -cla ...

  3. Numpy的数学统计函数

    Numpy的数学统计函数 本节内容: 1.Numpy有哪些数学统计函数: 函数名 说明 np.sum 所有元素的和 np.prod 所有元素的乘积 np.cumsum 元素的累积加和 np.cumpr ...

  4. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  5. 关于个人开源项目(vue app)的一些总结

    关于个人开源项目(vue app)的一些总结 项目地址 https://github.com/BYChoo/record 项目简介 此项目名叫:Record.是以Vue全家桶(vue,vue-rout ...

  6. H5移动端开发

    开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...

  7. 驳《我不是很懂 Node.js 社区的 DRY 文化》

    今天在群里有人讨论方老师的文章<我不是很懂 Node.js 社区的 DRY 文化>,我也看了一遍,槽点太多,不知道如何下笔. 方老师分析了几个依赖最多的 npm 包,每个都只有不到百行代码 ...

  8. 【Android开发】Android 颜色透明度换算

    透明度 透明度分为256阶(0-255),计算机上用16进制表示为(00-ff). 透明就是0阶,不透明就是255阶,如果50%透明就是127阶(256的一半当然是128,但因为是从0开始,所以实际上 ...

  9. java继承时能包括静态的变量和方法吗？举例说明！

    子类继承了超类定义的所有实例变量和方法包括静态的变量和方法(马克-to-win见下例),并且为它自己增添了独特的元素.子类只能有一个超类.Java不支持多超类的继承. 子类拥有超类的所有成员,但它不能 ...

  10. uniapp打包成H5部署到服务器教程

    当前端uniapp写的项目开发完成的时候,需要将页面打包出来,生成H5的静态文件,部署在服务器上,通过服务器链接地址,就可以直接在手机上点开访问 了. 在网上看了一圈,好像没有找到十分详细的教程,这里 ...