動畫是一種重要的視覺元素,可以使網站或應用更生動、更有吸引力。而CSS中的跳動動畫則是一種簡單而有效的動畫效果。
/* 設置一個基礎動畫 */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* 應用到元素上 */ .box { animation: bounce 1s ease infinite; }
以上代碼中,我們使用了CSS3的關鍵幀動畫(@keyframes)和transform屬性來創建了一個跳動的動畫效果。在關鍵幀中,我們設置了元素在0%和100%到達原始位置,50%時向上移動10像素。通過在元素上應用這個動畫,即可實現一個不斷跳躍的動畫效果。
CSS跳動動畫可以應用于各種元素,包括文字、圖像、按鈕等等。同時,我們可以通過調整動畫的時長、次數以及緩動函數等參數來達到不同的效果,例如緩慢跳動、快速跳動等。
總之,CSS跳動動畫是一種簡單而實用的動畫效果,可以為網站或應用帶來更加生動、有趣的視覺效果。