“小白，昨天的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成长之路》的动力！
扫一扫
1683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
