CSS 可以實現各種動畫效果,其中包括從左到右滑動。下面就介紹一下如何實現該動畫效果。
.slide-in-left { animation: slide-in-left 0.5s ease-out both; } @keyframes slide-in-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } }
首先,先定義一個類名為 slide-in-left ,然后在其中定義動畫屬性 animation 。其中,0.5s 表示動畫時長為 0.5 秒,ease-out 表示以減速的方式進行動畫,both 表示動畫結束時保持最終狀態。
接著,使用關鍵幀 @keyframes 定義動畫的具體過程。在該動畫中,元素從左側滑入,因此我們需要設置初始狀態 transform: translateX(-100%); ,將元素移動到屏幕左側。隨后,在 100% 時將元素向右移動 transform: translateX(0%); ,使其進入屏幕。
最后,只需將該類名添加到需要實現動畫的元素中即可。