css3属性之动画篇

transition-property，CSS 属性的名称；

transition-duration， 过渡效果花费的时间。默认是 0；

transition-timing-function，过渡效果的时间曲线。默认是 "ease"；

transition-delay， 过渡效果何时开始。默认是 0

transition是上面四个简写，如 transition: width 1s linear 2s

其中后面两个属性可以不写。

CSS3 @keyframes 规则

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

@keyframes可以使用from{ ... } to { ... } 来表示动画的状态的变化。

@keyframes myfirst{ from {background: red;} to {background: yellow;}}

也可以用百分比来规定变化发生的时间，如 0% 和 100%，在各个具体的 比例加上需要的变化。

@keyframes myfirst{ 

 0% {background: red;} 

 25% {background: yellow;} 

 50% {background: blue;} 

 100% {background: green;}

}

div {  

animation: myfirst 5 s ; 

 - webkit-animation: myfirst 5 s ; /* Safari 与 Chrome */

}

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长