CSS3实现动画

CSS3实现一个简单的动画

可以改变任意多的样式任意多的次数，用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成，为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
HTML代码：

<span class="span" id="span1" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
>
<span id="span2" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
<
<span id="span3" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
∧
<span id="span4" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
∨

CSS3代码：

实现的效果就是从上下左右各个方向的动态箭头，一般用于提醒用户可以向下或者向上拖动。