css的动画和过渡

一、过渡：

transition    简写属性，用于在一个属性中设置四个过渡属性。

transition-property   规定应用过渡的 CSS 属性的名称。

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

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

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

eg：

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

二、动画：

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

1、animation    所有动画属性的简写属性，除了 animation-play-state 属性。

2、animation-name     规定 @keyframes 动画的名称。

3、animation-duration   规定动画完成一个周期所花费的秒或毫秒。默认是 0。

4、animation-timing-function      规定动画的速度曲线。默认是 "ease"。

5、animation-delay       规定动画何时开始。默认是 0。

6、animation-iteration-count       规定动画被播放的次数。默认是 1。

7、animation-direction      规定动画是否在下一周期逆向地播放。默认是 "normal"。

8、animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。

9、animation-fill-mode      规定对象动画时间之外的状态。

eg：

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}