CSS3動畫是網頁設計中常用的元素之一。勻速動畫是CSS3中特別常見的一種動畫。這種動畫運動速度相同,因此動畫效果比較自然,讓網站更加流暢美觀。
下面是一個簡單的勻速動畫的例子:
div { width: 100px; height: 100px; background-color: #f00; position: absolute; animation: move 2s linear infinite; } @keyframes move { 0% { left: 0; } 100% { left: calc(100% - 100px); } }
這段代碼定義了一個100x100像素的紅色正方形,運動時間為2秒,效果為勻速運動。關鍵幀指令 “linear”確保運動速度恒定。移動路徑是從左至右,第一幀定位元素在左邊緣,第二幀使元素位于最后。
CSS3勻速動畫常常被應用于網站的橫幅、輪播圖和滾動頁面等元素。在這些場景中,運動軌跡和時間通常是固定的,因此勻速動畫效果最為合適。
總之,勻速動畫是CSS3動畫中最為常見的一種,它可以讓你的網站視覺效果更為流暢自然。