我們經常看到許多網站或者H5的動畫都做成了整屏切換的形式，為提高使用者體驗，會在首屏頁面下方放上一個動態的向下箭頭來提示使用者切換至下一屏。
動態箭頭的效果圖如下：

那麼這種效果是如何實現的呢？
其實非常簡單，在CSS3中提供了animation屬性，專門用於動畫。要使用這個屬性，需要先了解@keyframes的建立規則，在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
在這個動畫中，我們能夠看出在整個動畫中改變的是箭頭的位置，所以我們在建立動畫時，只需要給定箭頭的起始位置，利用animation讓他動起來就可以了。
接下來，我們一步一步完成。
1、 首先找到你所需要的箭頭圖片，將他利用定位的方式放在首屏的底部。
a) html程式碼（將圖片以背景或者插入圖片的形式放入標籤內，demo以背景形式展示）

2、 然後進行動畫建立，最簡單的方式就是隻給定初始的以及結束的css樣式即可。
css 程式碼



標註出來的為動畫的自定義名稱，可以根據你的動畫行為來定義。
0%為初始狀態，即剛開始動畫時。
100%為結束狀態，即動畫進行到100%時。
動畫改變了箭頭的底部位置，由距離底部80畫素變到了距離底部0畫素。

3、 接下來利用animation屬性讓他具有動畫效果
css程式碼：

第一個引數表示你所使用的動畫的名稱（即我們建立的動畫的動畫名稱），
第二個引數表示動畫完成的時間（即由0%到100%所用的時間），
第三個引數表示動畫執行的次數（可以為任意數字，infinite表示規定動畫無限次播放），因此造成了一個動態的箭頭的視覺效果。


通過以上三個步驟即可完成這個簡單的動畫效果，很多的動畫效果都可以通過建立動畫的方式來實現。