在前端開發中,CSS動畫是一個很常用的特效。其中一種比較常見的動畫效果就是來回運動的動畫效果。下面我們來介紹一下如何實現這種動畫效果。
/* CSS代碼 */ .box{ width: 100px; height: 100px; background: #ff0000; position: relative; animation: move 2s infinite alternate; } @keyframes move { 0%{ left: 0; } 100%{ left: 200px; } }
上面代碼中,我們給一個class為box的元素設置了一個animation屬性,屬性值為move 2s infinite alternate。其中,move為一個自定義的動畫名稱,2s表示動畫持續的時間,infinite表示動畫循環無限次,alternate表示動畫來回循環播放。
接下來我們在@keyframes中定義move動畫,動畫效果是將.box元素從左側位置移動到距離左側200px的位置。0%和100%代表動畫的開始和結束狀態,left屬性可以改變元素的位置。
通過這樣的CSS代碼,我們實現了一個來回運動的動畫效果。你也可以根據需要對CSS代碼進行調整,實現不同的動畫效果。