css3实现循环执行动画，且动画每次都有延迟
一、最终效果
需求：gift图片的小动画每隔2s执行一次。
需求就一句话，我们看一下实现过程。
二、实现过程
1、网页结构
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
display: inline-block;
background-color: #cc2222;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: 10px 12px;
width: 100px;
position: relative;
} .ico {
position: absolute;
width: 14px;
height: 16px;
background: url(images/ico.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 4px;
right: 27px;
}
</style>
</head> <body>
<nav>
<a href="javascript:;" class="box">
一元夺宝
<div class="ico"></div>
</a>
</nav>
</body> </html>
2、原始动画
原始动画效果为：鼠标hover上去出现动画。
动画样式如下：
/*动画*/
.ico:hover{
-webkit-animation: Tada 1s both;
-moz-animation: Tada 1s both;
-ms-animation: Tada 1s both;
animation: Tada 1s both
}
/*浏览器兼容性部分略过*/
@keyframes Tada {
0% {
transform: scale(1);
transform: scale(1)
} 10%,20% {
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
} 30%,50%,70%,90% {
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
} 40%,60%,80% {
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
} 100% {
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}
效果：鼠标hover上去gift图片会动一动。
3、实现变化后的需求
需求变动，要求不再是hover上去展示动画，而是每隔2s展示一次动画。
思路：不需要hover上去出现动画，就把hover去掉，每隔2s显示一次动画，很容易想到延迟2s,然后动画一直执行。
此时相关样式变成：
.ico{
-webkit-animation: Tada 1s 2s both infinite;
-moz-animation: Tada 1s 2s both infinite;
-ms-animation: Tada 1s 2s both infinite;
animation: Tada 1s 2s both infinite;
}
但是显示的效果是：页面加载第一次出现动画会延迟2s，后面的动画将不再有延迟。如下，这是不符合需求的。
为了看出效果，下图为延迟6s的效果。
此时换种思路，不要延迟执行动画，而是动画的效果本身就是前2s元素不动，后1s是元素动，然后一直循环执行。 这样在视觉上就会看起来是延迟2s执行1s动画。
计算一下，原来的百分比节点变成了多少。
将动画总时长变成3s，用计算出的百分比替换原来的百分比，代码如下：
.ico{
-webkit-animation: Tada 3s both infinite;
-moz-animation: Tada 3s both infinite;
-ms-animation: Tada 3s both infinite;
animation: Tada 3s both infinite;
}
@keyframes Tada {
0% {
transform: scale(1);
transform: scale(1)
}
70%,73%{
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
}
77%,83%,90%,97% {
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}
80%,87%,93%{
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}
100% {
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}
效果就是我们期望的了。
完整代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>demo of starof</title>
<style>
a {
display: inline-block;
background-color: #cc2222;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: 10px 12px;
width: 100px;
position: relative;
} .ico {
position: absolute;
width: 14px;
height: 16px;
background: url(images/ico.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 4px;
right: 27px;
}
/*动画*/
.ico{
-webkit-animation: Tada 3s both infinite;
-moz-animation: Tada 3s both infinite;
-ms-animation: Tada 3s both infinite;
animation: Tada 3s both infinite;
}
@-webkit-keyframes Tada {
0% {
-webkit-transform: scale(1);
transform: scale(1)
} 70%,73% {
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
} 77%,83%,90%,97% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
} 80%,87%,93% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
} 100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
} @-moz-keyframes Tada {
0% {
-moz-transform: scale(1);
transform: scale(1)
} 70%,73% {
-moz-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
} 77%,83%,90%,97% {
-moz-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
} 80%,87%,93%{
-moz-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
} 100% {
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
} @-ms-keyframes Tada {
0% {
-ms-transform: scale(1);
transform: scale(1)
} 70%,73% {
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
} 77%,83%,90%,97% {
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
} 80%,87%,93% {
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
} 100% {
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
} @keyframes Tada {
0% {
transform: scale(1);
transform: scale(1)
} 70%,73%{
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
} 77%,83%,90%,97% {
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
} 80%,87%,93%{
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
} 100% {
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
} </style>
</head> <body>
<nav>
<a href="javascript:;" class="box">
一元夺宝
<div class="ico"></div>
</a>
</nav>
</body> </html>
本文只是介绍一种思路，关于动画各个参数详情可参考：
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论，共同进步。
css3实现循环执行动画，且动画每次都有延迟的更多相关文章
- CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- Magic CSS3 – 创建各种神奇的交互动画效果
Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...
- CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等） CSS3与页面布局学习总结——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...
- CSS3新特性（阴影、动画、渐变）
一.阴影 1.1文字阴影: text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- 显示层封装及实现与优化（无动画+css3动画+js动画）
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- Nancy之Pipelines三兄弟(Before After OnError)
一.简单描述 Before:如果返回null,拦截器将主动权转给路由:如果返回Response对象,则路由不起作用. After : 没有返回值,可以在这里修改或替换当前的Response. OnEr ...
- int与Integer的爱恨情仇
int作为java中元老级的数据类型,可谓无处不在,自从jdk5诞生了Integer,从此不在孤单. 为什么要设计Integer呢?它与int有什么区别? 一.Integer是int的包装类型,是引用 ...
- 第 31 章 项目实战-PC 端固定布局[5]
学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区 ...
- 第 31 章 项目实战-PC端固定布局[2]
学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．大纲算法 ...
- Eclipse导入项目出现红色叹号的解决方法
情景: 我在另一台电脑开发Java Web项目,开发环境为 JDK 1.7,Tomcat v7.0,然后导入另一台电脑上,开发环境为为 JDK 1.8,Tomcat v8.0. 问题: 导入项目出现红 ...
- 最短路径之Floyd算法
Floyd算法又称弗洛伊德算法,也叫做Floyd's algorithm,Roy–Warshall algorithm,Roy–Floyd algorithm, WFI algorithm. Floy ...
- ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
- AngularJS 参考手册
AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ...
- maven：用appassembler-maven-plugin打包含有自定义目录的JAVA程序
问题说明: 用maven构建了一个项目,目录结构如下: appassemblerd的配置: <plugin> <groupId>org.codehaus.mojo</gr ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...