《小白H5成长之路27》首次接触CSS3动画，感觉棒极了

“小白，昨天的jQuery加载JSON数据练习的怎么样了？”

“感觉很不错，虽然对handle.php怎么连接的数据库，怎么输出的JSON数据不明白，不过我感觉我是不是可以把handle看成是一个静态的JSON格式的文本文件？”

“恩，目前可以这么看，改天我教教你简单的PHP知识吧！今天咱再来学个新的技能CSS3动画，有了CSS3动画我们就可以让页面更活泼，给用户的体验会非常不错。”

“CSS3动画是不是很难啊！看着不像是用简单的几个代码就可以实现的。”

老朱镇定的说道：“不难，原理非常简单，你只要了解了原理，什么类型的CSS3动画都可以实现。哦！对了，你知道之前Flash的动画是怎么实现的么？”

小白也接触过Flash，说道：“知道，Flash动画有两种类型的动画，一种是逐帧动画、一种是补间动画，逐帧动画类似于GIF图，通过时间轴上的关键帧确定每一时间点上图片的样子。补间动画比较方便，绘制一个形状或者一个影片剪辑原件设定初始关键帧和结束关键帧，它就会自动变化。”

老朱惊讶的说道：“不错不错，看来以前做过flash动画啊！CSS3动画跟你刚才说的补间动画比较类似，也是设定一个元素的初始状态和结束状态以及时间，这个元素就可以根据设定自动变化了。”

老朱继续说道：“使用CSS3动画的核心功能是keyframes规则，它类似于你刚说的Flash关键帧，主要用来标注不同阶段元素的状态。下面我们来看一个最简单的keyframes”

“这个keyframes关键帧表述的意思是：元素从（from）红色背景变为（to）黄色背景。由于不同浏览器对keyframes支持模式不一样，我们需要针对所有浏览器写关键帧：”

“关键帧写好以后，页面中如果有元素要用gogogo这个变换，这个元素通过css的animation属性调用就可以了。”

“使用amimation也需要进行浏览器兼容，你可以看看代码中用到了四种animation，animation第一个参数是关键帧keframes的名称，第二个参数是动画持续的时间。testDIV按照gogogo颜色变换完毕以后会恢复初始状态。这里我们没有给testDIV的css设定背景色，所以恢复初始状态以后testDIV会失去背景色，如果希望颜色变换结束以后固定为黄色，我们需要在testDIV的css属性中添加一个背景为黄色的属性。这里还有个重点就是testDIV的css属性里面明确添加了position属性为relative（相对定位），如果纯粹进行背景色变换是不需要这个属性的，但是涉及到位置变换就需要设定容器的position模式，下面我们在刚才的gogogo里面把位置移动也加上。”

“我们现在使用了背景色和left距离变换，还有其他很多能够进行动画渐变的属性，你可以把不同属性放到里面测试一下，看看哪些属性可以进行CSS3动画渐变。”

“好的，我现在去练习！”

“先不要急，还有一个小知识点你了解一下。再keyframes里面除了通过from和to设定开始结束外还可以通过百分比进行分段设定，使用百分比你可以设定很多个变换阶段。”

“关键帧的分段模式你也练习练习，一会有时间了，我们再进行讨论！”

---

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！