如下代码,其中的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. Kali中装中文输入法小企鹅

    STEP 1. 装fcitx框架,apt-get install fcitx STEP 2. 装googlepinyin输入法,apt-get install fcitx-googlepinyin S ...

  2. [转]Angular2 使用管道Pipe以及自定义管道格式数据

    本文转自:https://www.pocketdigi.com/20170209/1563.html 管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联. 纯管道(Pure Pipe ...

  3. SQL 行转列示例

    --油表 select (select SUM(XiaoHaoLiang)as'油表消耗总值' FROM dbo.NengHaoYouBiao WHERE CaiJiRiQi between '201 ...

  4. Jquery闪烁提示特效

    样式:.red{ border:1px solid #d00; background:#ffe9e8; color:#d00;} function shake(ele,cls,times){ var ...

  5. 探秘小程序(7):view组件

    小程序中最基础,最常用的组件--view,类似于html中div的存在有四个属性: ①hover-class:指定按下去的样式类.当 hover-class="none" 时,没有 ...

  6. ASP.NET Identity系列教程(目录)转载

    来源:http://www.cnblogs.com/r01cn/p/5179506.html 注:最近看到不少介绍微软ASP.NET Identity技术的文章,但感觉都不够完整深入,本人又恰好曾在A ...

  7. 关于git的一个错误提示

    一般clone仓库后如果,remote -v或者add出现如下的错误的话: Not a git repository (or any of the parent directories): .git需 ...

  8. JNI和NDK基础

    引言 JNI是Java Native Interface(Java本地接口),是为了方便Java调用C和C++等本地代码所封装的一层接口. NDK是Android提供的一个工具集合,通过NDK可以在A ...

  9. HTML-CSS写抽屉网的置顶区域

    1.在pycharm的已有工程中新建一个html文件. 2.在<body></body>标签内部写入要内容: <div class='head-box' > < ...

  10. React 入门学习笔记整理(六)—— 组件通信

    1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的 ...