我们常常看到许多网站或者H5的动画都做成了整屏切换的形式，为提高用户体验，会在首屏页面下方放上一个动态的向下箭头来提示用户切换至下一屏。
动态箭头的效果图如下：
那么这种效果是如何实现的呢？
实在非常大略，在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表示规定动画无限次播放），因此造成了一个动态的箭头的视觉效果。
通过以上三个步骤即可完成这个大略的动画效果，很多的动画效果都可以通过创建动画的办法来实现。
原文地址北京市盛世阳光文化传播有限任务公司：http://www.gonet.com.cn/webduirshow-140.html
