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 ></div> 52 <div ></div>
效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/113662.html
標籤：Html/Css
上一篇：FCC---Make a CSS Heartbeat using an Infinite Animation Count----超級好看的心跳，粉色的
下一篇：FCC---Animate Multiple Elements at Variable Rates---還可以改回圈時間，達到不同律動頻率的效果