HTML5实践 -- 如何使用css3完成google涂鸦动画

　　这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。

　　我们先来看html代码。

　　下面是部分css。

　　这部分代码没太大难度，我就不做详细讲解了。css基础不是很扎实的读者，也许会疑惑【开始】按钮是如何实现定位的。可以自行阅读position属性，了解absolute具体作用。

　　下面是上述html和css代码完成的页面效果。

　　我们创建了一个名为horse-ride的关键帧，针对chrome和firefox需要在前面添加-webkit-或者是-moz-前缀。0%和100%分别代码开始和结束，可以根据需要增加新的case，比如50%时的动画效果。

　　

　　下面，我们来为horse添加css3的动画效果。

　　这里首先介绍:checked和~，:checked是伪类，指当#play_button选中时的css效果，~指的是#play_button的兄弟节点。

　　接下来介绍.horse相关的css属性。animation中我们使用了4个值，依次代表：关键帧（我们上面定义的horse-ride），动画间隔时间，动画效果和执行次数。之后我们又通过animation-delay设置动画延迟时间。通过transition和background-position集合起来，设置背景的过渡动画。

　　最后我们为【开始】按钮添加动画效果。

　　大家可以自己动手尝试开发了。

　　原文地址：http://cssdeck.com/labs/google-doodle-for-eadweard-j-muybridges-182nd-birthday

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>