There are a variety of ways to alter the animation rates of similarly animated elements.
So far, this has been achieved by applying an animation-iteration-count property and setting @keyframes rules.
To illustrate, the animation on the right consists of two "stars" that each decrease in size and opacity at the 20% mark in the @keyframes rule, which creates the twinkle animation.
You can change the @keyframes rule for one of the elements so the stars twinkle at different rates.
练习题目：
Alter the animation rate for the element with the class name of star-1 by changing its @keyframes rule to 50%.
练习代码：
1 <style> 2 .stars { 3 background-color: white; 4 height: 30px; 5 width: 30px; 6 border-radius: 50%; 7 animation-iteration-count: infinite; 8 } 9 10 .star-1 { 11 margin-top: 15%; 12 margin-left: 60%; 13 animation-name: twinkle-1; 14 animation-duration: 1s; 15 } 16 17 .star-2 { 18 margin-top: 25%; 19 margin-left: 25%; 20 animation-name: twinkle-2; 21 animation-duration: 1s; 22 } 23 24 @keyframes twinkle-1 { 25 50% { 26 transform: scale(0.5); 27 opacity: 0.5; 28 } 29 } 30 31 @keyframes twinkle-2 { 32 20% { 33 transform: scale(0.5); 34 opacity: 0.5; 35 } 36 } 37 38 #back { 39 position: fixed; 40 padding: 0; 41 margin: 0; 42 top: 0; 43 left: 0; 44 width: 100%; 45 height: 100%; 46 background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6); 47 } 48 </style> 49 50 <div id="back"></div> 51 <div class="star-1 stars"></div> 52 <div class="star-2 stars"></div>
效果如下：
