出处：http://www.cnblogs.com/starof/p/5443445.html
一、最终效果
需求：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>
本文只是介绍一种思路，关于动画各个参数详情可参考：
更多参考：
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
本文转自：CSS3: 动画循环执行(带延迟)的实现
相关推荐
【纯CSS3实现汽车行驶动画】是一个利用现代CSS3技术创建的交互式网页特效，它无需JavaScript即可展示一辆汽车在页面上行驶的动态效果。这个技术对于提升网站的用户体验和视觉吸引力具有重要作用，尤其适用于儿童游戏...
`@keyframes`定义了动画从开始到结束的状态变化，而`animation`属性则控制动画的执行方式，如时长、延迟、次数、方向等。 ### 二、@keyframes 规则 `@keyframes`是CSS3中用于创建动画的关键帧规则。例如，我们可以...
在这个“css3制作穿越云层开场动画，css3+js”的项目中，我们将深入探讨如何利用CSS3的动画特性以及JavaScript来创建一个引人入胜的开场场景，让用户仿佛穿越云层般体验。 首先，我们需要理解CSS3的关键帧动画（@...
本文将深入探讨“纯CSS3炫酷元素边框线条动画特效”，这是一种无需JavaScript，仅通过CSS3就能实现的动态边框效果，能够使页面元素的边框自动循环运动，为用户带来独特的交互体验。 首先，CSS3中的关键帧动画（@...
本教程将详细讲解如何利用CSS3实现滑动图片的动画效果，帮助你为网站增添动态美感。 首先，我们需要理解CSS3中的关键帧动画（@keyframes）。这是创建动画的核心，它定义了动画从开始到结束的一系列样式变化。例如，...
**CSS3 动画源码详解** 在网页设计领域，CSS3的引入为开发者提供了前所未有的动态效果制作能力。无需依赖像Flash这样的外部插件，我们可以通过CSS3的`animation`属性来创建丰富的动画效果，使得网页更具交互性和...
在网页设计中，加载动画是用户体验的重要组成部分，尤其是在等待页面内容加载时，一个美观而吸引人的CSS3加载动画可以极大地提升用户体验。本资源提供的是8种不同风格的CSS3加载动画代码，旨在帮助开发者和设计师为...
在实现loading效果时，我们可以创建一个简单的HTML结构，如一个带有背景色或边框的圆圈，然后应用上述CSS动画。例如： ```html <div class="spinner"></div> ``` ```css .spinner { width: 20px; height: 20...
这个库包含了多种预定义的动画效果，可以让开发者无需从零编写复杂的 CSS3 动画代码就能实现丰富的视觉体验。让我们深入探讨一下 animate.css 的核心概念和如何利用它来创建 CSS3 动画效果。 ### animate.css 概述 ...
在本文中，我们将深入探讨如何使用CSS3来实现一个摇铃铛的效果。这个效果主要依赖于CSS3的动画（animation）和变换（transform）属性，这两个特性为网页设计师提供了丰富的动态视觉表现力。 首先，CSS3动画是创建...
这会让`id`为`myElement`的元素执行`rotateCube`动画，持续2秒，无限循环，且动画速度线性均匀。 文件列表中的`index.html`很可能是包含HTML结构和CSS样式代码的文件，而`img`文件夹可能包含用于动画的图片资源。...
本资源提供了28种纯CSS3实现的加载loading动画特效，这些特效不仅美观，而且在实际应用中表现出良好的性能和兼容性。 CSS3是 Cascading Style Sheets 的第三版，它引入了许多新的特性和功能，让开发者能够创建出...
在本资源中，我们关注的是一个使用CSS3实现的旋转动画效果。这个效果展示了一些圆环相互嵌套，形成一个动态的循环旋转画面。通过HTML5的CSS3动画技术，开发者能够创建出丰富的视觉效果，这不仅提升了网页的互动性，...
要实现滚动触发的CSS3动画，首先需要了解以下几个关键概念： 1. **CSS3动画（@keyframes）**：这是定义动画的关键，它在CSS中定义了一个动画的起始状态和结束状态，以及在动画过程中可能经过的中间状态。例如： ```...
这将使`.myElement`执行名为`fadeIn`的动画，持续2秒，采用ease-in-out缓动函数，延迟1秒开始，无限次循环，且每次反向播放。 **10例精彩CSS3动画效果** 1. **滑动门效果**：通过改变元素的`transform`属性，可以...
这将使盒子在1秒内按照explode关键帧动画执行一次无限循环的爆炸效果。 然而，虽然CSS3可以创建许多动画，但其在复杂性和性能方面可能受限。这时，GSAP（GreenSock Animation Platform）就派上了用场。GSAP是一个...
综上所述，利用CSS3的@keyframes和animation属性，可以实现各种各样的动画效果，极大地增强了网页的表现力和用户的交互体验。通过理解这些属性和用法，开发者可以灵活运用到网页设计中，制作出美观和功能兼备的网页...
在本项目"CSS3动画实现小熊奔跑.rar"中，主要涉及的是利用CSS3的动画（animation）特性来创建一个动态的小熊奔跑效果。CSS3是层叠样式表的第三个版本，它引入了许多新的功能，其中动画是其一大亮点，为网页设计提供...
5. **延迟（delay）和循环（iteration-count）**：使用`animation-delay`可以设定动画何时开始，而`animation-iteration-count`可以设置动画播放次数，如`infinite`表示无限循环。 6. **随机性**：为了使动画看起来...
本资源“纯CSS3加载动画Loading特效代码.zip”提供了30多种不同的加载动画效果，完全基于CSS3技术实现，无需JavaScript或者其他额外的库，这使得这些加载动画轻量级且易于集成到任何项目中。 首先，我们来了解CSS3...