一、过渡：

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;}

css的动画和过渡