在CSS中,我們可以使用@keyframes
規(guī)則來創(chuàng)建動畫。@keyframes
規(guī)則用于描述動畫從起始狀態(tài)到結(jié)束狀態(tài)的樣式變化,我們可以通過在@keyframes
規(guī)則中定義多個關(guān)鍵幀來實現(xiàn)連續(xù)動畫效果。
下面是一個簡單的示例,展示了如何使用@keyframes
規(guī)則創(chuàng)建連續(xù)動畫:
@keyframes my-animation { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(200px); } } .my-element { animation: my-animation 5s linear; }
在這個示例中,我們定義了一個名為my-animation
的動畫,它描述了元素從起始位置(transform: translateX(0)
)開始,移動到中間位置(transform: translateX(100px)
),然后移動到結(jié)束位置(transform: translateX(200px)
)的過程,動畫的總時間是5秒,運動方式是勻速直線運動(linear
)。
你可以根據(jù)自己的需求調(diào)整關(guān)鍵幀的位置和樣式,以及動畫的總時間和運動方式,通過添加更多的關(guān)鍵幀,你可以創(chuàng)建更復(fù)雜的連續(xù)動畫效果。