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