In CSS animations, the animation-timing-function property controls how quickly an animated element changes over the duration of the animation.
If the animation is a car moving from point A to point B in a given time (your animation-duration), the animation-timing-function says how the car accelerates and decelerates over the course of the drive.
There are a number of predefined keywords available for popular options. For example, the default value is ease, which starts slow, speeds up in the middle, and then slows down again in the end.
Other options include ease-out, which is quick in the beginning then slows down, ease-in, which is slow in the beginning, then speeds up at the end, or linear, which applies a constant animation speed throughout.
練習題目：
For the elements with id of ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out.
Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds.
練習代碼：
1 <style> 2 3 .balls { 4 border-radius: 50%; 5 background: linear-gradient( 6 35deg, 7 #ccffff, 8 #ffcccc 9 ); 10 position: fixed; 11 width: 50px; 12 height: 50px; 13 margin-top: 50px; 14 animation-name: bounce; 15 animation-duration: 2s; 16 animation-iteration-count: infinite; 17 } 18 #ball1 { 19 left:27%; 20 animation-timing-function: linear; 21 } 22 #ball2 { 23 left:56%; 24 animation-timing-function: ease-out; 25 } 26 27 @keyframes bounce { 28 0% { 29 top: 0px; 30 } 31 100% { 32 top: 249px; 33 } 34 } 35 36 </style> 37 38 <div id="ball1"></div> 39 <div id="ball2"></div>
效果如下：
注意，因為回圈時間相同，所以2個小球不同速率，但同一時間結束
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/113666.html
標籤：Html/Css
上一篇：FCC---Animate Multiple Elements at Variable Rates---還可以改回圈時間，達到不同律動頻率的效果
下一篇：FCC---Learn How Bezier Curves Work---定義坐標軸點的值，影響斜率，改變速度。具體除錯換值既可以體會