其實非常簡單，在CSS3中提供了animation屬性，專門用於動畫。要使用這個屬性，需要先了解@keyframes的創建規則，在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改爲新樣式的動畫效果。
在這個動畫中，我們能夠看出在整個動畫中改變的是箭頭的位置，所以我們在創建動畫時，只需要給定箭頭的起始位置，利用animation讓他動起來就可以了。
接下來，我們一步一步完成。
1、 首先找到你所需要的箭頭圖片，將他利用定位的方式放在首屏的底部。
a) html代碼（將圖片以背景或者插入圖片的形式放入標籤內，demo以背景形式展示）
b) css代碼（利用定位將箭頭放在首屏的底部適當位置，網站中大部分情況會進行左右居中）
2、 然後進行動畫創建，最簡單的方式就是隻給定初始的以及結束的css樣式即可。
css 代碼
標註出來的爲動畫的自定義名稱，可以根據你的動畫行爲來定義。
0%爲初始狀態，即剛開始動畫時。
100%爲結束狀態，即動畫進行到100%時。
動畫改變了箭頭的底部位置，由距離底部80像素變到了距離底部0像素。
3、 接下來利用animation屬性讓他具有動畫效果
css代碼：
第一個參數表示你所使用的動畫的名稱（即我們創建的動畫的動畫名稱），
第二個參數表示動畫完成的時間（即由0%到100%所用的時間），
第三個參數表示動畫執行的次數（可以爲任意數字，infinite表示規定動畫無限次播放），因此造成了一個動態的箭頭的視覺效果。
通過以上三個步驟即可完成這個簡單的動畫效果，很多的動畫效果都可以通過創建動畫的方式來實現。