試試CSS3的animation屬性

一. 小目標

實現長頁截屏的滑動效果。

二. 分析過程

首先，在鼠停留在圖片上的時候需要觸發動畫效果，這裡可以用偽類:hover來實現，把實現動畫效果的CSS代碼寫在:hover裡。

因為要通過CSS來控制圖片的顯示，所以這裡用background-image來加載圖片，再用background-postition來控制圖片的位置。

最後就用animation指定@keyframes，並設置持續時間即可。

三. 實現

1
2
3
4
5
6
7
8
9

/* html 略 */
.image{
   width: 400px;
    height: 500px;
    background-image: url(https://gw.alipayobjects.com/zos/rmsportal/GnDiHuTNxcXpSaJxhmRl.jpg);
    background-position-y: 0%;
    background-size: cover;
    background-repeat: no-repeat;
}

因為這段CSS是加在一個div上，而div本身沒有高度和寬度，所以需要加上高度和寬度。

注意一點，一般在使用background-size時要加background-repeat: no-repeat，否則如果圖片太小，會在容器不停的重複來填滿容器。有興趣的讀者可以試一下把width或height調大，然後刪掉background-repeat。

background-position-y是設置了圖片垂直方向上的開始位置，這裡0%就是由最上面開始顯示。backgroun-size: cover會把圖片盡可能的拉大以填充整個圖片，我們這個圖片是height大於width，所以會截斷了下面的一部份，截斷了的部份會通過動態去變化background-position-y慢慢顯示。

1
2
3
4
5
6
7
8
9
10
11

@keyframes scrollUpAndDown{
  0%{
    background-position-y: 0%;
  }
  50%{
    background-position-y: 100%;
  }
  100%{
    background-position-y: 0%;
  }
}

要使用animation就必須掌握@keyframes，基本可以這樣理解，@keyframes就是幀的一個變化過程，可以用百份比或者from to的方式來聲明變化的過程，在裡面再聲明要變化的屬性。上面的代碼就是說，前半段動畫先把background-position-y由0%遞增至100%，後半段再將其遞減至0%。

1
2
3
4
5

.image:hover{
  animation: scrollUpAndDown 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

最後便是如何觸發動畫的問題，這裡我們用:hover，當鼠標停留在圖片上的時候觸發。animation的第一個參數是@keyframes的名字，第二個參數是動畫持續的時間，可用s或ms作單位。animation-timing-function是指定動畫的速度函數，ease-in-out是以低速開始和結束。其它選項有linear、ease、ease-in、ease-out、cubic-bezier(x,x,x,x)等等，感興趣的讀者可以自行換個選項試試不的效果。

至此我們的這個簡單的動畫就已經完成了。

完整的代碼在這裡，大家加油！