Home > Article > Web Front-end > How to implement loop execution animation (delay every time) in css3?
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:
/*动画*/ .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. #3. Implementing the changed requirementsThe 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.
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. 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:
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!