CSS幀動畫是指通過設置一系列的關鍵幀(Keyframes),使得元素在特定時間內執行特定的動畫效果。而自適應則是指能夠在不同屏幕大小及設備上自動適應,保證頁面的正確顯示。
首先,在設置CSS幀動畫時,需要使用關鍵幀來定義動畫的起始及結束狀態,同時可以添加中間狀態來讓動畫更加流暢。例如以下代碼:
.animate { width: 100px; height: 100px; background-color: red; animation-name: move; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: 1; } @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(200px); } }
以上代碼定義了一個向右移動的動畫效果,在2秒內,元素向右移動200px。可以看到,在定義動畫時,關鍵幀需要設置的屬性及屬性值都十分具體,寬高及顏色都需要明確設置。
然而,在實際應用場景中,元素的寬高及顏色都不能確定,這時,我們需要讓動畫自適應。可以使用CSS變量、calc()函數及max/min函數來實現。
.box { --size: calc(min(100vw, 100vh) - 20px); //設置動態長度,值為視口寬度和高度中較小值減去20px width: var(--size); height: var(--size); background-color: green; animation-name: scale; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(2); } 100% { transform: scale(1); } }
以上代碼中,通過設置一個CSS變量--size,并使用計算函數calc()來動態設置元素的寬高。這樣,元素的長度值就會根據視口大小而變化,保證元素在不同屏幕大小下的正確顯示。
綜上所述,通過使用關鍵幀設置動畫效果,再通過使用CSS變量、計算函數及max/min函數等實現自適應,我們能夠輕松地實現CSS幀動畫的自適應效果。