How to implement loop execution animation (delay every time) in css3?-CSS Tutorial-php.cn

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

青灯夜游

Release： 2018-09-17 17:37:31

Original

6031 people have browsed it

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

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

##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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!