[筆記] 網頁CSS動畫─位置Transitioning Position

在這篇文章中，我們同樣會利用CSS 3中transition這個屬性來製作位置移動的動畫效果。

在上一篇[筆記] 網頁CSS動畫─color transition中，我們提過利用CSS 3的transition製作顏色變色的動態效果，接著我們則要練習製作位置改變的動態效果。

完成的結果會像是這樣子：

See the Pen position transition by PJCHEN (@PJCHENder) on CodePen.

製作概念

製作的概念很簡單
1.先用span包住兩個不同的文字(Click Now和Save 94%)，
2.接著用position這個屬性搭配上:hover，讓滑鼠移過的時候，span的position向上移動，

3.最後則是搭配上transition，讓文字移動的過程產生動畫的效果

示意圖如下：

STEP：製作按鈕

如同[筆記] 網頁CSS動畫─color transition做法， 我們先製作按鈕，作法如下：

HTML部分

  <button class='btn'>
 <span class='top content'>Click Now</span>
 <span class='bottom content'>Save 94%</span>
  </button>

我們把原本的按鈕裡面的內容，拆成兩個span，分別是一開始顯示的內容，還有滑鼠移過後顯示的內容，單純按鈕的class取作btn，按鈕內容的class稱做content，並且在分別加上top和bottom這兩個class。

CSS部分

.btn {
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  border-radius: 11px;
  font-family: Arial;
  color: #FFFFFF;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  width: 150px;
  height: 50px;
  position: relative;
  background-color: #00A0D6;
  transition: background-color 0.4s;
}

.btn:hover {
  background-color: #007DA7;
}

我們製作一個150px x 50px的弧形按鈕，同時使用[筆記] 網頁CSS動畫─color transition所說的，製作color transition的效果。

很重要的一點是，這裡要把position設成relative，因為我們等一下要把span裡面的內容設成position: absolute，以方便操控span的位置。

STEP: position transition效果添加

我們先把span的樣子製作出來，套用到content這個class：

.content {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 26px;
  text-align: center;
  line-height: 50px;
  /*最後才加上的動畫效果*/
  /*transition: top 0.3s;*/
}

接著把span的原始位置設定好，因為在content這個class已經有寫上position:absolute，所以它會根據button這個標籤的相對位置做變化；同時利用:hover設定。

.top {
  top: 0px;
}

.btn:hover .top {
  top: -50px;
}

.bottom {
  top: 50px;
}

.btn:hover .bottom {
  top: 0px;
}

這時候，當滑鼠移過按鈕時，就會出現變色同時變文字的效果，但是因為是使用hover，還沒有使用動畫效果，所以會是立即變文字，而沒有動畫的感覺，因此最後我們要在content這個class加上transition這個屬性，多加上這一欄：

transition: top 0.3s;

移除超過按鈕的文字部分

最後，我們會發現，這些字即時超過按鈕的時候，仍然會顯示出來，特別是在有背景色的情況下，像是這樣：

為了要解決這個問題，我們要用到overflow:hidden這個屬性，也就是超過的部分請幫我隱藏出來，因此我們要把這一行添加在btn這個class裡：

.btn{
  overflow:hidden;
}

到這裡就大功告成了，再來看一次結果吧！

See the Pen position transition by PJCHEN (@PJCHENder) on CodePen.

以上內容均為學習自Code School: Adventures in web animations之學習筆記