animate.css 一些常用的CSS3动画效果

本文地址：http://www.zhangxinxu.com/wordpress/?p=1867. 题目：实现类似下图的宽度自适应效果，IE9+，FireFox，Chrome，Opera等使用CSS3实现，IE6~8浏览器使用图片实现. ————- 假设这是大家全神贯注思考的18分钟 ————————.

在以前很长一段时间里，网页上的各种特效还需要采用flash 在进行. 但最近几年里，我们已经很少看到这种情况了，绝大部分已经使用JavaScript 动画效果来取代flash. 说的取代是网页特效部分，而不是动画. 网页特效比如：渐变菜单、渐进显示、图片轮播等；而动画比如：故事情节广告、MV 等等.

久等了，上集我们制作了一个具有行走动作的蓝精灵动画，本集我们来为蓝精灵实现往返走动的效果. Symbol，即元件，是动画制作中常用的概念. 通过Symbol我们可以封装独立的动画元素，便于管理和重用. 脚本，是动画制作中另一个重要的概念. 在HTML5动画制作中，脚本即JavaScript脚本，通过脚本我们可以响应动画事件，实现交互，更自由的操控动画元素,比如元件动画的重复播放.

在Flash动画制作中，使用SpriteSheet制作动画元素是一个常见和普遍的方法. 在Edge Animate中，我们也可以利用SpriteSheet来制作HTML5动画. 本文将从一个示例出发，介绍在Edge Animate中如何使用SpriteSheet. 在文章 《EDGE ANIMATE：ADOBE新推制作HTML5动画可视化工具》中，可以看到一个简单的蓝精灵动画，一个蓝精灵从屏幕左侧走到右侧，又返回，然后不断重复.

CSS3从IE滤镜偷窍过来的创意，但易用性明显提高了许多. 利用这个，我们可以对某个元素进行旋传，缩放，倾斜与位移，并且区分元素类型，无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 具有相当多的新增属性，而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久，各个浏览器厂商还在开发中，有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂，一旦写错就会导致出现问题. 为此，有人开发了一个生成 CSS3 代码的工具 Create CSS3.

之前，我们有发表过CSS文字渐变效果，但是其实那并不是纯粹的基于CSS的渐变，它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯，只有webkit浏览器支持，请暂时无视其它浏览器. 在《CSS的未来：一些试验性CSS属性》中，我们提到了这个属性，相对于Firefox只能用svg做mask，webkit则灵活很多，图片和css3渐变均可.

演示地址：http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

其实早知道这个属性，但是一直没有去研究过. 今天正好在twitter看到这个词，就去研究了下，正好解决了目前遇到的一个小难题，所以分享下. 嗯，其实这是个比较简单的CSS3属性. 在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的div或者其它元素一般都会给个宽高，或者relative的元素可以不给宽高，这个时候，这些元素就会盖住下面的地图层，以至于地图层无法操作.

下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码. 经测试，IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.