css3动画基础
参考学习地址
http://www.html5china.com/CSS3/20110507_1562.html
先来实现一个
鼠标移上去就渐渐变淡的效果
<style>
.block{border:5px solid #ccc;padding:10px;-webkit-border-radius:5px;}
#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
#fade:hover{opacity: 0;}
</style>
<div id="fade" class="block">Place mouse on me i will fade!</div>
#fade:hover 其中 :hover 就是css伪类，#fade（id为fade的元素）hover时，就是有鼠标悬停时的样式为 {opacity:0} 透明度为0，之所以有渐变的效果是因为
默认样式中 #fade{opacity: 1;-webkit-transition: opacity 1s linear;} 的-webkit-transition: opacity 1s linear; 代表着 1秒的透明线性过渡，显然这是webkit的，目前的css3动画只在webkit核心的浏览器支持，即 chrome和Safari,谷歌浏览器和苹果浏览器。
| 动态伪类 | 起作用的元素 | 描述 |
| :link | 只有链接 | 未访问的链接 |
| :visited | 只有链接 | 访问过的链接 |
| :hover | 所有元素 | 鼠标经过元素 |
| :active | 所有元素 | 鼠标点击元素 |
| :focus | 所有可被选中的元素 | 元素被选中 |
transition的基本语法，过渡的基本写法
以上面的 -webkit-transition: opacity 1s linear; 为例
-webkit-transition: 这个算是声明，固定的部分
1，要改变的属性transition-property，opacity 这里是透明度，其它的属性如下所示
变换属性的列表：
| CSS属性 | 改变的对象 |
| background-color | 色彩 |
| background-image | 只是渐变 |
| background-position | 百分比，长度 |
| border-bottom-color | 色彩 |
| border-bottom-width | 长度 |
| border-color | 色彩 |
| border-left-color | 色彩 |
| border-left-width | 长度 |
| border-right-color | 色彩 |
| border-right-width | 长度 |
| border-spacing | 长度 |
| border-top-color | 色彩 |
| border-top-width | 长度 |
| border-width | 长度 |
| bottom | 百分比，长度 |
| color | 色彩 |
| crop | 百分比 |
| font-size | 百分比，长度 |
| font-weight | 数字 |
| grid-* | 数量 |
| height | 百分比，长度 |
| left | 百分比，长度 |
| letter-spacing | 长度 |
| line-height | 百分比，长度，数字 |
| margin-bottom | 长度 |
| margin-left | 长度 |
| margin-right | 长度 |
| margin-top | 长度 |
| max-height | 百分比，长度 |
| max-width | 百分比，长度 |
| min-height | 百分比，长度 |
| min-width | 百分比，长度 |
| opacity | 数字 |
| outline-color | 色彩 |
| outline-offset | 整数 |
| outline-width | 长度 |
| padding-bottom | 长度 |
| padding-left | 长度 |
| padding-right | 长度 |
| padding-top | 长度 |
| right | 百分比，长度 |
| text-indent | 百分比，长度 |
| text-shadow | 阴影 |
| top | 百分比，长度 |
| vertical-align | 百分比，长度，关键词 |
| visibility | 可见性 |
| width | 百分比，长度 |
| word-spacing | 百分比，长度 |
| z-index | 正整数 |
| zoom | 数字 |
该取值还有个强大的“all”取值，表示上表所有属性；
2，过渡的时间transition-duration以秒为单位 如 0.1s 也可以写成 .1s
3，动画执行的计算方式transition-timing-function，取值如下
ease：逐渐慢下来，函数等同于尔贝塞曲线(0.25, 0.1, 0.25, 1.0).
linear：线性过度,函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：由慢到快,函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：由快到慢, 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：由慢到快在到慢, 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier：特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
4，动画延迟，例子中没有，说明是不延迟，立即执行动画
transition-delay在动作和变换开始之间等待多久，通常用秒来表示(比如, .1s)
复合的CSS3动画
-webkit-transition: color .25s linear , background-color 1s linear;
中间以逗号分隔，这里的文字颜色和背景颜色将同时变化一个执行0.25秒一个是1秒，记住两个过渡动画是同时开始的
transform(变形)结合的一些动画
这时候transition-property建议取值为“all”；
比如放大缩小：
#blah { -webkit-transition: all .3s ease-in-out; }
#blah:hover { -webkit-transform: scale(1.5); }
旋转：
.arrow { -webkit-transition: all 1s ease-in-out;}
.arrow:hover {-webkit-transform: rotate(720deg);}
http://webdeveloperjuice.com/demos/css/css3effects.html