css做長圖動畫

最近在學習css動畫，發現一個很有趣的應用，就是用css做長圖動畫。所謂長圖動畫，就是將一張長長的圖片分割成幾張小圖，通過css動畫讓它們依次播放，形成一段流暢的動畫效果。

首先需要將長圖分割成小圖。可以使用photoshop或其他圖片編輯軟件，將長圖按照一定的大小切割成多個小圖。比如以下長圖，被切割成了5張寬度為200px的小圖。

╔════════════════════════════════╗
║     長圖                    ║
╠════════════════════════════════╣
║  small_01  |  small_02  |  small_03  |  small_04  |  small_05  ║
╚════════════════════════════════╝

接下來，需要將這些小圖依次播放起來。可以使用css中的animation屬性來實現。

.small_image {
animation-name: image-animation;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
width: 200px;
height: auto;
}
@keyframes image-animation {
0%{
transform: translateX(-200px);
}
100%{
transform: translateX(-1000px);
}
}

上面的代碼中，我們將.small_image這個類名應用在了每個小圖上。它的animation屬性指定了動畫的一些基本參數。我們使用了keyframes關鍵字定義了動畫的具體過渡效果。這里我們讓小圖從左側滑出，依次向右播放，直到完全滑出屏幕，然后再從左側滑入開始循環。

最后只需要將這些小圖用div包裹起來，就完成了長圖動畫的制作。