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

⼀、最终效果

需求：gift图⽚的⼩动画每隔2s执⾏⼀次。需求就⼀句话，我们看⼀下实现过程。

⼆、实现过程

1、⽹页结构

View Code

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) }}

效果就是我们期望的了。

完整代码如下：

View Code

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

本⽂作者,因知识本⾝在变化，作者也在不断学习成长，⽂章内容也不定时更新，为避免误导读者，⽅便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。