如下代码,其中的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. [TensorFlow] Introduction to TensorFlow Datasets and Estimators

    Datasets and Estimators are two key TensorFlow features you should use: Datasets: The best practice ...

  2. Jenkins CLI 命令详解

    笔者在前文<通过 CLI 管理 Jenkins Server>中介绍了如何通过 SSH 或客户端命令行的方式管理 Jenkins Server,限于篇幅,前文主要的目的是介绍连接 Jenk ...

  3. ASP.NET MVC 5 Authentication Breakdown

    In my previous post, "ASP.NET MVC 5 Authentication Breakdown", I broke down all the parts ...

  4. nodejs+nginx获取真实ip

    nodejs + nginx获取真实ip分为两部分: 第一.配置nginx: 第二.通过nodejs代码获取: 其他语言也是一样的,都是配置nginx之后,在http头里面获取“x-forwarded ...

  5. 年终培训关于磁盘冗余阵列、热备、群集、负载均衡、云计算、F5、Nginx等的概念和基本原理

    在系统部署实施过程中,客户往往会关注系统的可用性方面的指标. 对于一个具备高可用性的系统来说, 多机部署方案是必不可少的. 我们这个知识分享,就从多个不同层面来介绍多机部署方案. ---------- ...

  6. 团队项目alpha冲刺

    Deadline: 2018-11-18 22:00PM,以博客提交至班级博客时间为准 提交: (a) 项目课堂演示: (b) 7篇冲刺随笔,组内可共享: (c) 1篇测试随笔,组内可共享: (d) ...

  7. Python和Java分别实现冒泡排序

    1.基本思想 冒泡排序的基本思想是对比相邻的元素值.相邻元素值比较,如果满足条件两者就交换,把较小的移动到前面,把较大的移动到后面,这样较小的元素就像气泡一样浮上来了.可以看出,冒泡排序的每一次循环都 ...

  8. [转]微擎人人商城m()函数调用model方法

    本文转自:http://yangjunwei.com/a/3177.html 微擎人人商城p()函数可内部调用任意插件的函数 http://yangjunwei.com/a/3216.html

  9. JQuery实现省市区的三级联动

    JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  10. springboot整合freemarker----一点小小的错误

    最近小弟正在学习springboot,没办法,现在微服务太火了.小弟也要顺应时代的潮流啊 :( 好了,废话不多说了!!!! 首先在springboot的pom.xml添加freemarker的依赖 & ...