transition过渡（与：hover同时使用）

当元素从一种样式变换为另一种样式时

兼容到IE10

规定希望把效果添加到哪个css属性上（规定名称）

规定效果的时长（一般以秒为单位）时长未规定，默认值为0

当指针移出元素时，他会组件变回原来的样式

transition-property: none|all|property;

transition-property 规定应用过渡的 CSS 属性的名称。【常用】 transition-property: none|all所有属性都将获得过渡效果。|property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔;

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

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

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

 

css3动画是使元素从一种样式逐渐变化为另一种样式的效果。

css @keyframes规则（规定动画的规则，就能创建由当前央视逐渐改为新样式的动画效果）

IE九以下的版本都不支持

创建动画时，请把它捆绑到某个选择器，否则就不会产生动画效果

通过规定至少以下两项css3动画属性，即可以将动画绑定到选择器：

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

animationdiv

{

animation: myfirst 5s;

-moz-animation: myfirst 5s; /* Firefox */

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

-o-animation: myfirst 5s; /* Opera */

}

可以使用0——100%规定

@keyframes MYfirst

{0% {background：red；}

25% {background：yellow；}

50% {background：blue；}

100% {background：green；}

}

0%开始。100%结束

from开始

to结束

（无限次播放）

 

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

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

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

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

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

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

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

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

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