CSS Bounce Out 動畫效果

一、項目簡介

CSS Bounce Out 動畫效果是一種比較流行的CSS動畫效果之一。該效果的出現可以使得網頁在視覺上變得更加生動有趣，同時也能夠為網頁帶來一些視差效果，吸引用戶的注意力，提高用戶的瀏覽體驗。

二、如何實現CSS Bounce Out動畫效果

這裡介紹一種使用CSS3實現Bounce Out動畫效果的方法，具體步驟如下：

1、編寫基礎代碼

首先，在HTML頁面上創建一個div標籤，並且給定一個CSS類名，例如：bounce-out

  <div class="bounce-out"></div>

2、設置基礎樣式

給bounce-out類設置基礎樣式，例如設置寬度、高度、背景顏色等屬性。

  .bounce-out {
    width: 100px;
    height: 100px;
    background-color: #f00;
  }

3、設置動畫關鍵幀

設置bounce-out動畫關鍵幀，分別設置它的起始位置、結束位置和過渡狀態。這裡採用了bounceOut的動效庫。

@keyframes bounceOut {
  0% {
    transform: scale(0.9);
  }

  20%,
  50%,
  55%,
  80%,
  100% {
    transform: scale(1);
  }

  40%,
  45% {
    transform: translate3d(0, -30px, 0);
  }

  60%,
  65% {
    opacity: 1;
    transform: translate3d(0, -15px, 0);
  }

  75% {
    transform: translate3d(0, -4px, 0);
  }
}

4、添加動畫效果

最後，在bounce-out類中添加動畫效果，並設置動畫播放的時長。這裡使用了上述定義好的keyframes屬性，以及animation屬性來完成Bounce Out動畫效果。

.bounce-out {
  animation: bounceOut 0.75s;
}

三、Bounce Out動畫效果使用場景

Bounce Out動畫效果通常可以用來為某些元素添加動態效果，例如頁面中的按鈕、菜單、彈出層等。這些元素往往需要在用戶與之進行交互時進行動畫效果的呈現，以突出它們的重要性和特殊性。

四、動畫效果展示

下面是一個展示Bounce Out動畫效果的示例代碼：

  <div class="bounce-out"></div>

  .bounce-out {
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: bounceOut 0.75s;
  }
  
  @keyframes bounceOut {
    0% {
      transform: scale(0.9);
    }

    20%,
    50%,
    55%,
    80%,
    100% {
      transform: scale(1);
    }

    40%,
    45% {
      transform: translate3d(0, -30px, 0);
    }

    60%,
    65% {
      opacity: 1;
      transform: translate3d(0, -15px, 0);
    }

    75% {
      transform: translate3d(0, -4px, 0);
    }
  }