CSS動畫上下跳動的方法

在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動畫，為了制作一個上下跳動的動畫，我們可以定義一個從0%到100%的動畫過程，其中50%是動畫的頂點，此時元素位于其原始位置的上方；100%是動畫的底部，此時元素返回其原始位置。

以下是一個簡單的例子，展示了一個div元素如何上下跳動：

@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}
div {
  animation: jump 1s infinite;
}

在這個例子中，jump動畫將div元素從原始位置（translateY(0)）移動到上方（translateY(-50px)），然后返回原始位置（translateY(0)），動畫的持續(xù)時間為1秒，并且會無限次重復。

你可以根據(jù)需要調整動畫的持續(xù)時間、移動距離以及重復次數(shù)，如果你想要元素跳動得更高，你可以增加translateY的值；如果你想要動畫持續(xù)更長的時間，你可以增加動畫的持續(xù)時間。