在CSS中實現從左到右的動畫非常簡單,只需要使用animation動畫屬性即可。下面是具體實現步驟:
/* 1.定義一個動畫名稱,例如 mymove */ @keyframes mymove { from {left: 0px;} /* 2.定義開始狀態,這里是將left屬性值從0px變成200px*/ to {left: 200px;} /* 3.定義結束狀態,這里是將left屬性值從200px變成0px */ } /* 4.定義動畫屬性,包括動畫名稱、動畫時間、動畫速度曲線和動畫延遲時間,這里是將動畫時間設置為2秒,速度曲線設置為ease-in-out,延遲時間為0秒 */ div { animation-name: mymove; animation-duration: 2s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-iteration-count: infinite; /* 5.定義動畫重復次數,這里是無限循環 */ animation-direction: alternate; /* 6.定義動畫運動方向,這里是交替從左到右再從右到左 */ }
上面的代碼中,我們首先定義一個名為mymove的動畫名稱,并在其中定義這個動畫的開始和結束狀態,即從0px到200px,再從200px到0px。之后,我們再為div元素定義動畫屬性,包括動畫名稱、動畫時間、動畫速度曲線和延遲時間,最后再定義動畫重復次數和運動方向。
當我們將上面的代碼應用到一個div元素上時,這個元素就會自動從左到右運動,并在到達右側后重新開始從右到左運動,如此交替不斷,直到停止。