如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的。

.item{
webkit-animation: revolving 1s 3s infinite;
animation: revolving 1s 3s infinite;
}
@-webkit-keyframes revolving{
0%{
-webkit-transform: perspective(700px) rotateX(90deg);
}
50%{
-webkit-transform: perspective(700px) rotateX(0deg);
}
100%{
-webkit-transform: perspective(700px) rotateX(-90deg);
}
}
把总动画设为4秒,然后前75%也就是3秒都没变化(0-75%),之后的25%也就是1秒做动画就可以了。

.item{
webkit-animation: revolving 4s 0s infinite;
animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
0,75%{
-webkit-transform: perspective(700px) rotateX(90deg);
}
87.5%{
-webkit-transform: perspective(700px) rotateX(0deg);
}
100%{
-webkit-transform: perspective(700px) rotateX(-90deg);
}
}

CSS3 animation动画,循环间的延时执行时间的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  5. css3 animation(动画)笔记

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  6. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  7. 关于css3 Animation动画

    在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...

  8. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  9. css3 animation动画使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 利用channel在goroutins之间控制同步和传递数据

    在java等代码中,我们查询数据库的操作: sql = "select * from ...."; result = db.query(sql) for(item in resul ...

  2. 精读JavaScript模式(三),new一个构造函数居然发生了什么?

    一.前言 上个月底,爸爸因为事故突然离世,说心里话,现在看到'去世','爸爸'这样的字眼,眼泪都会忍不住在眼眶打转,还是需要时间治愈.最近也只是零碎的看了下东西,始终沉不下心去读书,直到今天还是决定捡 ...

  3. swagger 常用注解说明

    本内容引用自:https://blog.csdn.net/u014231523/article/details/76522486 常用注解: - @Api()用于类: 表示标识这个类是swagger的 ...

  4. IntelliJ IDEA 2018.3 for Mac 注册码激活

    一.前往 jetbrains 官网下载 IDEA Ultimate版本,地址: https://www.jetbrains.com/idea/download/#section=mac 二.安装 ID ...

  5. 2017ACM/ICPC亚洲区沈阳站(部分解题报告)

    HDU 6225 Little Boxes 题意 计算四个整数的和 解题思路 使用Java大整数 import java.math.BigInteger; import java.util.Scann ...

  6. 今天通过npm 安装 install 的时候出现的问题

    E:\Workspace_WebStorm\angular2>npm install -gC:\Users\lyx\AppData\Roaming\npm`-- angular2@0.0.0 ` ...

  7. [转]简单的动态修改RDLC报表页边距和列宽的方法

    本文转自:http://star704983.blog.163.com/blog/static/136661264201161604413204/ 1.修改页边距 XmlDocument XMLDoc ...

  8. Topshelf 学习 跨平台【转载】

    Topshelf 学习 跨平台   Topshelf是一个开源的跨平台的宿主服务框架,支持Windows和Mono,只需要几行代码就可以构建一个很方便使用的服务宿主. 官网:http://topshe ...

  9. Hibernate小解惑.

      1.什么是SessionFactory?什么是Session?httpsession和hibernate的session的有什么区别?     SessionFactory接口负责初始化Hiber ...

  10. JS模拟实现数组的map方法

    昨天使用map方法的时候,突然感觉一直在直接用,也没有试试是怎么实现的,本来想直接搜一篇文章盘一下子,结果没搜到合适的,好吧,那就自己来写一下子吧 今天就来实现一个简单的map方法 首先我们来看一下m ...