CSS動畫是網站設計和交互體驗的重要部分,而彈跳動畫作為其中的一種常見動畫效果,可以很好地增強網站的動態感和吸引力。本文將介紹用CSS實現彈跳動畫效果的方法。
.bounce { animation-name: bounce; animation-duration: 1.5s; animation-fill-mode: both; animation-timing-function: ease-in-out; } @keyframes bounce { 0%, 100% { transform: translateY(0); animation-timing-function: ease-in; } 50% { transform: translateY(-20px); animation-timing-function: ease-out; } }
以上是一個使用CSS實現彈跳動畫效果的示例代碼。其中,首先給需要添加彈跳動畫效果的元素(例如一個按鈕)添加一個類名“bounce”(class="bounce")。
接著,定義名為“bounce”的animation動畫,包括animation-name(動畫名稱)、animation-duration(持續時間)、animation-fill-mode(動畫播放前和播放后元素應該如何呈現)、animation-timing-function(動畫的時間函數類型)等屬性。其中,animation-fill-mode的值為“both”表示動畫結束后元素保持通過動畫所演示的狀態;animation-timing-function的值為“ease-in-out”表示動畫開始和結束的速度慢,中間的速度快。
最后,定義一個名為“bounce”的keyframes,表示動畫的關鍵幀。其中,0%和100%表示動畫的起始和結束狀態,通過transform: translateY(0)將元素Y軸不移動;50%表示動畫的中間狀態,通過transform: translateY(-20px)將元素向上移動20像素。同時,animation-timing-function的值在不同的關鍵幀中設置不同的值,以實現彈性的效果。
通過以上步驟,就可以在網站上添加一個漂亮的彈跳動畫效果,增強網站的動態感和吸引力。
上一篇css 3 div 邊框
下一篇css 3 下拉導航