如下代码,其中的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. ProxySQL 配置详解及读写分离(+GTID)等功能说明 (完整篇)

    ProxySQL是灵活强大的MySQL代理层, 是一个能实实在在用在生产环境的MySQL中间件,可以实现读写分离,支持 Query 路由功能,支持动态指定某个 SQL 进行 cache,支持动态加载配 ...

  2. python 浅析模块,包及其相关用法

    今天买了一本关于模块的书,说实话,模块真的太多了,小编许多也不知道,要是把模块全讲完,可能得出本书了,所以小编在自己有限的能力范围内在这里浅析一下自己的见解,同时讲讲几个常用的模块. 这里是2018. ...

  3. tensorflow实现循环神经网络

    包括卷积神经网络(CNN)在内的各种前馈神经网络模型, 其一次前馈过程的输出只与当前输入有关与历史输入无关. 递归神经网络(Recurrent Neural Network, RNN)充分挖掘了序列数 ...

  4. Ansible系列(四):playbook应用和roles自动化批量安装示例

    Ansible系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html playbook是ansible实现批量自动化最重要的手段.在其中可以使用变 ...

  5. c++中虚函数和多态性

    1.直接看下列代码: #include <iostream> using namespace std; class base{ public: void who(){ cout<&l ...

  6. .12-浅析webpack源码之NodeWatchFileSystem模块总览

    剩下一个watch模块,这个模块比较深,先大概过一下整体涉及内容再分部讲解. 流程图如下: NodeWatchFileSystem const Watchpack = require("wa ...

  7. EF select 匿名类 问题

    连续两次被相同问题困扰. 一.举例 var query=db.StudentScore.Where(r=> r.SubjectId==subjectId).Select(g=>new {S ...

  8. try、catch、finally详解,你不知道的异常处理

    介绍 不管是新手还是工作几年的老油条,对try{}catch{}来说是不陌生的.他可以来帮助我们获取异常信息,在try中的代码出现错误,火灾catch代码块中被捕获到.官方也给了详细的解释:. 抛出异 ...

  9. (3)Jquery1.8.3快速入门_jquery对象dom对象转换

    1.Jquery 对象 dom对象的转化使用: 1.1.jquery 对象: 通过$()包装DOM对象后产生的对象. 1.2.jquery对象是Jquery独有的 ,可以使用jquery中的方法. 1 ...

  10. 站在DevOps肩膀上的TestOps(二)

    一十一 发表于 2018-03-14 16:40:22 TestOps   摘要: TestOps模型旨在将整个团队的注意力集中在质量上,因此TestOps确实需要无缝且可靠. 一个简单的例子是任何测 ...