一、最终效果

需求：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>

本文只是介绍一种思路，关于动画各个参数详情可参考：

css3中变形与动画（一）

css3中变形与动画（二）

css3中变形与动画（三）

本文作者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=& ...

随机推荐

关系数据库SQL之可编程性事务
前言前面关系数据库SQL之可编程性函数(用户自定义函数)一文提到关系型数据库提供了可编程性的函数.存储过程.事务.触发器及游标,前文已介绍了函数.存储过程,本文来介绍一下事务的使用.(还是以前面的银 ...
C# .NET Socket封装
Socket封装,支持多客户端,支持大文件传输,支持多线程并发,对较大的Socket包进行分块传输. 封装所要达到的效果,是可以像下面这样使用Socket和服务端通信,调用服务端的方法,让你在使用So ...
jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
学习笔记之-------UIScrollView 基本用法代理使用
//contentSize.contentInset和contentOffset 是 scrollView三个基本的属性. // 滚动 self.ScrollView.contentSize =sel ...
【转】mysql_fetch_row , mysql_fetch_array , mysql_fetch_assoc 的区别
<?php $link = mysql_connect('localhost', 'root', ”); mysql_select_db('abc', $link); $sql = “selec ...
CSS3 莲花盛开动画
点击这里查看效果:http://keleyi.com/a/bjad/32gxxsaw.htm 或者:http://keleyi.com/keleyi/phtml/css3/10a.htm 效果图: 代 ...
jquery.datatables中文使用说明
http://www.cnblogs.com/taizhouxiaoba/archive/2009/03/17/1414426.html 本文共四部分:官网 | 基本使用|遇到的问题|属性表一:官方 ...
【一次面试】再谈javascript中的继承
前言面向对象编程是每次面试必问的知识点,而前端js如何实现继承每次命中率高达80% 这不,近两天我们面试时候,同事就问道面试者此问题,但是,不论之前自己做的回答,还是面试者的回答,基本都不太令人满意 ...
使用 Arduino 和 LM35 温度传感器监测温度
上一篇玩儿了一下Arduino入门,这次再进一步,用一下LM35温度传感器来监测当前温度.LM35温度传感器已经在Arduino入门套件里包含了,就是那个有三个脚的小黑块儿. 我们先把这些东西连起来. ...
docker中建立私有git服务器[gitlab]
现在使用git的很普遍,在开发内部如何建立个git服务器,本文以gitlab为例,让你分分钟就可以搭好一个环境[docker的威力非同一般] 首先在docker.com找到gitlab的下载源和信息, ...

css3实现循环执行动画，且动画每次都有延迟