Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动

时间:2019-10-25
本文章向大家介绍Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动,主要包括Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

The previous challenges covered how to use some of the animation properties and the @keyframes rule.

Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation.

Here's an example:

animation-iteration-count: 3;

In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.

把次数改为无线infinite就一直动。

练习题目:

To keep the ball bouncing on the right on a continuous loop, change the animation-iteration-count property to infinite.

练习代码: (不需要全部写,填空进去)

 1 <style>
 2 
 3   #ball {
 4     width: 100px;
 5     height: 100px;
 6     margin: 50px auto;
 7     position: relative;
 8     border-radius: 50%;
 9     background: linear-gradient(
10       35deg,
11       #ccffff,
12       #ffcccc
13     );
14     animation-name: bounce;
15     animation-duration: 1s;
16     animation-iteration-count: infinite;
17   }
18 
19   @keyframes bounce{
20     0% {
21       top: 0px;
22     }
23     50% {
24       top: 249px;
25       width: 130px;
26       height: 70px;
27     }
28     100% {
29       top: 0px;
30     }
31   }
32 </style>
33 <div id="ball"></div>

效果:

在设置区域内,带一个好看背景色的小球,上下弹动,小球的大小会挤压又恢复,通过@keyframe设置的0%-100%的值实现的

原文地址:https://www.cnblogs.com/jane-panyiyun/p/11738794.html