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>

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

css3中变形与动画（一）

css3中变形与动画（二）

css3中变形与动画（三）

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论，共同进步。

时间： 2024-11-03 12:11:20

css3实现循环执行动画，且动画每次都有延迟的相关文章

c语言-while 循环执行的次数是while 循环执行的次数是

问题描述 while 循环执行的次数是while 循环执行的次数是有以下程序段 int k=0; while(k=1) k++; 则while 循环执行的次数是:( ) A) 无限次 B) 有语法错,不能执行 C) 一次也不执行 D) 执行1次为什么是a 解决方案 while(k=1) 不是 while(k==1) 解决方案二: k=1:while中1为真,便执行.所以一直都在执行. 解决方案三: 答案是A,逻辑操作中将非零视为真,所以while(k)是真,所以无限循环了. 解决方案四: 每

CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值.不允许负值 <color>: 设置对象的阴

PhotoShop制作图片循环滚动播放GIF动画教程

介绍PhotoShop制作屏幕上的图片循环滚动播放GIF动画效果,需要制作的图片要同样尺寸,不同尺寸的要调成同样大小,具体制作方法看教程, 喜欢的同学可以一起来学习一下! 最终效果图: 分类: PS入门教程

如何递归执行view的动画

如何递归执行view的动画效果: 山寨的源头: 图片素材: 源码: // // ViewController.m // RepeatAnimationView // // Created by YouXianMing on 15/1/30. // Copyright (c) 2015年 YouXianMing. All rights reserved. // #import "ViewController.h" @interface ViewController () @prop

同时对view延时执行两个动画时候的现象

同时对view延时执行两个动画时候的现象对于view延时执行了两个动画后,会将第一个动画效果终止了,直接在第一个动画的view的最后的状态上接执行后续的动画效果,也就是说,我们可以利用这个特性来写分段动画效果,比如,可以定时2秒,2秒的状态值为100%,中途可以停止,达不到2秒的效果就触发不了最终效果,这对于写控件来说是很好的一个属性哦,下次教程将会写一个按钮的特效的控件,效果类似于: 效果: 源码: // // ViewController.m // ViewAnimation // //

线程-MFC程序，我想无限循环执行我的程序n次，但是每次都不能进入man.DoModal();

问题描述 MFC程序,我想无限循环执行我的程序n次,但是每次都不能进入man.DoModal(); 进入man.DoModal();后,运行几行就退出了,而以前单线程是可以正确执行完毕的,在任务管理器中可以看到线程不断增加,但就是不能正确执行完这个man.DoModal();函数,请问这是什么原因? static UINT ThreadFunc(LPVOID pParam)//线程函数声明 { WinMan man; man.DoModal(); return 0; } void CDemoDl

Android 动画（View动画,帧动画,属性动画）详细介绍_Android

0. 前言 Android动画是面试的时候经常被问到的话题.我们都知道Android动画分为三类:View动画.帧动画和属性动画. 先对这三种动画做一个概述: View动画是一种渐进式动画,通过图像的平移.缩放.旋转和透明度等各种渐进式变换完成动画效果. 帧动画是通过不停的切换图片实现动画效果. 属性动画是不停的改变对象的属性来实现动画效果.本文原创,转载请注明出处: http://blog.csdn.net/seu_calvin/article/details/52724655 1. Vi

Android 动画（View动画,帧动画,属性动画）详细介绍

C#中for循环、while循环循环执行的方法_C#教程

先给大家介绍下C#中的循环执行for循环在这一节练习中,我们向大家介绍一下C#中的另一种重要的循环语句,for循环. for(表达式1;表达式2;表达式3) { 循环体 } 表达式1:一般为赋值表达式,给控制变量赋初值: 表达式2:逻辑表达式,循环控制条件:当条件为真时,循环执行循环体中的语句. 表达式3:一般为赋值表达式,给控制变量增量或减量. 这样看起来是不是挺抽象的.通过实际的例子,你会非常容易理解for循环. 你创建一个项目.解决方案名称为Sloution18,项目名称为Exercis