CSS3属性transition 属性、animation属性

transition 过渡属性

transition 属性是一个简写属性，用于设置四个过渡属性：

注意：CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

1.transition-property
指定CSS属性的name，(如：width、color、transform 、border-radius),transition过渡效果
2.transition-duration
transition效果需要指定多少秒或毫秒才能完成
3.transition-timing-function
指定切换效果的速度

4.transition-delay
延迟秒或毫秒数切换效果才开始

怎么设置多个过渡属性name

多个属性逗号隔开
transition: transform 2s ease, border-radius 3s ease-out;

animation属性

animation属性是一个简写属性，细分有8个属性，前四个属性和过渡属性一样

使用例子

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;

/* Safari and Chrome */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;

}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}