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