Loading...
keyframes 我們中文稱之為關鍵影格,0% 及 100% 分別都是關鍵影格,同樣的道理,你可以設定任何你想設定的百分比,可以是 10%(動畫執行期間的1/10)、50%(動畫執行期間的一半) 等,這些百分比,都是代表動畫執行期間的關鍵影格。
觀察以下的寫法,在 33% 與 66% 裡面所撰寫的 css 是相同的:
那我們就可以改成寫如下:
@keyframes rotation { 0% { transform: rotate(0deg); } 33% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 66% { transform: rotate(90deg); } 100% { transform: rotate(360deg); } }
@keyframes rotation { 0% { transform: rotate(0deg); } 33%, 66% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }