Home > Article > Web Front-end > How to implement loop execution animation (delay every time) in css3?

How to implement loop execution animation (delay every time) in css3?

青灯夜游Original: 2018-09-17 17:37:315939browse

This chapter introduces how CSS3 implements loop execution animation (with delay every time), and lets you understand the process of achieving the effect through examples. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Final effect

##Requirement: The small animation of the gift image is executed every 2 seconds.

The requirement is just one sentence, let’s take a look at the implementation process.

2. Implementation process

1. Web page structure

<!DOCTYPE html>
<html>

<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:;">
              一元夺宝 
              <div></div>
         </a>
    </nav>
</body>

</html>

Rendering:

How to implement loop execution animation (delay every time) in css3?

2. Original animation

The original animation effect is: animation appears when the mouse hovers up.

The animation style is as follows:

/*动画*/
    .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)
    }
}

Effect: The gift image will move when the mouse hovers up.

How to implement loop execution animation (delay every time) in css3?

#3. Implementing the changed requirements

The requirements have changed. The requirement is no longer to display animations on hover, but to display animations every 2 seconds.

Idea: If there is no need for the hover to appear animated, remove the hover and display the animation every 2 seconds. It is easy to think of a delay of 2 seconds, and then the animation will continue to execute.

At this time, the relevant style becomes:

.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;
}

But the displayed effect is: the first animation on page loading will be delayed by 2s, and subsequent animations will no longer be delayed. As follows, this does not meet the requirements.

In order to see the effect, the picture below shows the effect of delaying for 6s.

How to implement loop execution animation (delay every time) in css3?

Change your thinking at this time, do not delay the execution of the animation, but the effect of the animation itself is that the element does not move in the first 2s, and the element moves in the next 1s, and then continues Loop execution. In this way, it will visually appear that the animation is executed with a delay of 2s and 1s.

Calculate how much the original percentage node has become.

How to implement loop execution animation (delay every time) in css3?

Change the total duration of the animation to 3s and replace the original percentage with the calculated percentage. The code is as follows:

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

The effect is what we expected:

How to implement loop execution animation (delay every time) in css3?

The above is the detailed content of How to implement loop execution animation (delay every time) in css3?. For more information, please follow other related articles on the PHP Chinese website!

css3 循环

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of css opacity propertyNext article：Detailed explanation of css opacity property

See more

How to implement loop execution animation (delay every time) in css3?

Related articles