`
天梯梦
  • 浏览: 13741051 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

CSS3: 动画循环执行(带延迟)的实现

 
阅读更多

出处:http://www.cnblogs.com/starof/p/5443445.html

 

一、最终效果

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>

 

CSS3: 动画循环执行(带延迟)的实现

 

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图片会动一动。

CSS3: 动画循环执行(带延迟)的实现

 

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的效果。

CSS3: 动画循环执行(带延迟)的实现

此时换种思路,不要延迟执行动画,而是动画的效果本身就是前2s元素不动,后1s是元素动,然后一直循环执行。 这样在视觉上就会看起来是延迟2s执行1s动画。

计算一下,原来的百分比节点变成了多少。

CSS3: 动画循环执行(带延迟)的实现

将动画总时长变成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)
    }
}

 

效果就是我们期望的了。

CSS3: 动画循环执行(带延迟)的实现

完整代码如下:

<!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中变形与动画(三)

 

更多参考:

CSS3: 常用动画特效及4个最流行的动画库

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)

CSS:媒体查询 CSS3 Media Queries

CSS3: Media Query实现响应式Web设计

CSS3 Flex 弹性布局用法

 

本文转自:CSS3: 动画循环执行(带延迟)的实现

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    纯CSS3实现汽车行驶动画.zip

    【纯CSS3实现汽车行驶动画】是一个利用现代CSS3技术创建的交互式网页特效,它无需JavaScript即可展示一辆汽车在页面上行驶的动态效果。这个技术对于提升网站的用户体验和视觉吸引力具有重要作用,尤其适用于儿童游戏...

    Css3 animation---介绍如何实现css的动画

    `@keyframes`定义了动画从开始到结束的状态变化,而`animation`属性则控制动画的执行方式,如时长、延迟、次数、方向等。 ### 二、@keyframes 规则 `@keyframes`是CSS3中用于创建动画的关键帧规则。例如,我们可以...

    css3制作穿越云层开场动画,css3+js

    在这个“css3制作穿越云层开场动画,css3+js”的项目中,我们将深入探讨如何利用CSS3的动画特性以及JavaScript来创建一个引人入胜的开场场景,让用户仿佛穿越云层般体验。 首先,我们需要理解CSS3的关键帧动画(@...

    纯CSS3炫酷元素边框线条动画特效

    本文将深入探讨“纯CSS3炫酷元素边框线条动画特效”,这是一种无需JavaScript,仅通过CSS3就能实现的动态边框效果,能够使页面元素的边框自动循环运动,为用户带来独特的交互体验。 首先,CSS3中的关键帧动画(@...

    css3滑动图片动画效果

    本教程将详细讲解如何利用CSS3实现滑动图片的动画效果,帮助你为网站增添动态美感。 首先,我们需要理解CSS3中的关键帧动画(@keyframes)。这是创建动画的核心,它定义了动画从开始到结束的一系列样式变化。例如,...

    CSS3动画源码

    **CSS3 动画源码详解** 在网页设计领域,CSS3的引入为开发者提供了前所未有的动态效果制作能力。无需依赖像Flash这样的外部插件,我们可以通过CSS3的`animation`属性来创建丰富的动画效果,使得网页更具交互性和...

    8种超炫css3加载动画代码_css3 loading动画效果代码

    在网页设计中,加载动画是用户体验的重要组成部分,尤其是在等待页面内容加载时,一个美观而吸引人的CSS3加载动画可以极大地提升用户体验。本资源提供的是8种不同风格的CSS3加载动画代码,旨在帮助开发者和设计师为...

    Css3动画 实现loading效果

    在实现loading效果时,我们可以创建一个简单的HTML结构,如一个带有背景色或边框的圆圈,然后应用上述CSS动画。例如: ```html &lt;div class="spinner"&gt;&lt;/div&gt; ``` ```css .spinner { width: 20px; height: 20...

    CSS3动画实现小熊奔跑.rar

    在本项目"CSS3动画实现小熊奔跑.rar"中,主要涉及的是利用CSS3的动画(animation)特性来创建一个动态的小熊奔跑效果。CSS3是层叠样式表的第三个版本,它引入了许多新的功能,其中动画是其一大亮点,为网页设计提供...

    animate.css动画属性制作css3动画效果

    这个库包含了多种预定义的动画效果,可以让开发者无需从零编写复杂的 CSS3 动画代码就能实现丰富的视觉体验。让我们深入探讨一下 animate.css 的核心概念和如何利用它来创建 CSS3 动画效果。 ### animate.css 概述 ...

    css3实现摇铃铛效果.zip

    在本文中,我们将深入探讨如何使用CSS3来实现一个摇铃铛的效果。这个效果主要依赖于CSS3的动画(animation)和变换(transform)属性,这两个特性为网页设计师提供了丰富的动态视觉表现力。 首先,CSS3动画是创建...

    css3实现多个元素依次显示效果

    综上所述,利用CSS3的@keyframes和animation属性,可以实现各种各样的动画效果,极大地增强了网页的表现力和用户的交互体验。通过理解这些属性和用法,开发者可以灵活运用到网页设计中,制作出美观和功能兼备的网页...

    css3 3D旋转动画

    这会让`id`为`myElement`的元素执行`rotateCube`动画,持续2秒,无限循环,且动画速度线性均匀。 文件列表中的`index.html`很可能是包含HTML结构和CSS样式代码的文件,而`img`文件夹可能包含用于动画的图片资源。...

    纯css3 加载loading动画特效。亲测可用

    本资源提供了28种纯CSS3实现的加载loading动画特效,这些特效不仅美观,而且在实际应用中表现出良好的性能和兼容性。 CSS3是 Cascading Style Sheets 的第三版,它引入了许多新的特性和功能,让开发者能够创建出...

    一个CSS3实现的旋转动画效果.rar

    在本资源中,我们关注的是一个使用CSS3实现的旋转动画效果。这个效果展示了一些圆环相互嵌套,形成一个动态的循环旋转画面。通过HTML5的CSS3动画技术,开发者能够创建出丰富的视觉效果,这不仅提升了网页的互动性,...

    css3聚光灯射线旋转动画特效.zip

    在这个特效中,可能结合了关键帧动画(@keyframes),来控制射线的旋转速度和方向,以及动画的持续时间、延迟和循环次数。 4. **伪元素(::before和::after)**:为了实现特定的图形效果,可能使用了伪元素来添加...

    滚动触发css3动画

    要实现滚动触发的CSS3动画,首先需要了解以下几个关键概念: 1. **CSS3动画(@keyframes)**:这是定义动画的关键,它在CSS中定义了一个动画的起始状态和结束状态,以及在动画过程中可能经过的中间状态。例如: ```...

    10例精彩CSS3动画效果

    这将使`.myElement`执行名为`fadeIn`的动画,持续2秒,采用ease-in-out缓动函数,延迟1秒开始,无限次循环,且每次反向播放。 **10例精彩CSS3动画效果** 1. **滑动门效果**:通过改变元素的`transform`属性,可以...

    基于CSS3和GSAP的超酷盒子爆炸动画特效

    这将使盒子在1秒内按照explode关键帧动画执行一次无限循环的爆炸效果。 然而,虽然CSS3可以创建许多动画,但其在复杂性和性能方面可能受限。这时,GSAP(GreenSock Animation Platform)就派上了用场。GSAP是一个...

    CSS3生日蛋糕烟花动画代码.rar

    5. **延迟(delay)和循环(iteration-count)**:使用`animation-delay`可以设定动画何时开始,而`animation-iteration-count`可以设置动画播放次数,如`infinite`表示无限循环。 6. **随机性**:为了使动画看起来...

Global site tag (gtag.js) - Google Analytics