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

＆lt; datalist＆gt;的目的是什么。元素？Mar 21, 2025 pm 12:33 PM

本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159

＆gt; gt;的目的是什么元素？Mar 21, 2025 pm 12:34 PM

本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati

＆lt; meter＆gt;的目的是什么。元素？Mar 21, 2025 pm 12:35 PM

本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前

视口元标签是什么？为什么对响应式设计很重要？Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。

＆lt; iframe＆gt;的目的是什么。标签？使用时的安全考虑是什么？Mar 20, 2025 pm 06:05 PM

本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。

如何使用HTML5表单验证属性来验证用户输入？Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。

我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？Mar 12, 2025 pm 04:05 PM

本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit

HTML5中跨浏览器兼容性的最佳实践是什么？Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践，重点是特征检测，进行性增强和测试方法。

See all articles

热AI工具

热工具

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

显示更多

1、网页结构

2、原始动画

3、实现变化后的需求

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

Atom编辑器mac版下载

Dreamweaver Mac版

安全考试浏览器

DVWA

mPDF

热门话题