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

首页

web前端

html教程

css3实现循环执行动画，且动画每次都有延迟_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:19 AM

一、最终效果

需求：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,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML标签和HTML属性有什么区别？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未来：进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容，提升SEO和无障碍访问。2)功能化将引入新元素和属性，满足用户需求。3)模块化将支持组件化开发，提高代码复用性。

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

See all articles