如下代码,其中的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. JavaWeb学习 (三)————Tomcat服务器学习和使用(二)

    一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下:

  2. netty源码解解析(4.0)-5 线程模型-EventExecutorGroup框架

    上一章讲了EventExecutorGroup的整体结构和原理,这一章我们来探究一下它的具体实现. EventExecutorGroup和EventExecutor接口 io.netty.util.c ...

  3. .net core 基于IIS发布

    原文链接: https://www.cnblogs.com/gx018/p/7874060.html

  4. webpack 学习总结demo

    github源码地址 https://github.com/ghshuo/webpack-demo webpack介绍 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(mo ...

  5. vb.bet 控件

    TextBox1.BackColor = Color.White'设置控件的背景色(白色) TextBox1.BackColor = Color.Yellow'设置控件的背景色(黃色) TextBox ...

  6. 一张图弄懂opengl的诸多库gl glu glut freeglut glew glfw之间关系

    开始学习opengl,但是看opengl编程指南不同版本之间使用了一堆不同的库,概念名称全都搅起的,越看越糊涂,遂整理的一下opengl相关的一些库的名词, 才发现是不同时期不同版本不断发展的结果. ...

  7. 初学CSS-2-文本的属性

    文本装饰属性: 格式:text-decoration:underline: 取值:underline(下划线) line-through(删除线) overline(上划线) none(什么都没有) ...

  8. css清楚浮动的class

    .clearfix:after { display: table; visibility: hidden; clear: both; height:; content: ''; } 直接在浮动元素的父 ...

  9. 洛谷P2447 [SDOI2010]外星千足虫(异或方程组)

    题意 题目链接 Sol 异或高斯消元的板子题. bitset优化一下,复杂度\(O(\frac{nm}{32})\) 找最优解可以考虑高斯消元的过程,因为异或的特殊性质,每次向下找的时候找到第一个1然 ...

  10. 【读书笔记】iOS-Settings Bundle

    一,打开工程--->右键--->Add File--->iOS-->Resource-->Settings Bundle. 二,会弹出如下对话框---->Creat ...