一：css3动画之--------transition

语法（简写方式）：transition: property duration timing-function delay；

 div{ transition:all 1s ease-in-out 2s; }

 上面这句代码意思就是把过渡属性都加入持续一秒，缓进缓出的动画，并在两秒钟后开始执行

 transition：中文是过渡的意思，顾名思义，它就是专门做过渡动画的，比如一些放大缩小，隐藏显示等，下面我们一起来看看他的几个属性

 1：transition-duration：过渡效果指定在一秒之内完成

div{
    width:100px;
    height:100px;
    border-radius: 50%;
    background:#f40;
    transition-duration:1s;
}
div:hover{
    height:150px;	
    width:150px;
}

transition-duration为动画执行所需的时间，这段代码的意思就是鼠标移入，div的宽高就会都变成150px 

2：transition-property：指定CSS属性的name，也就是说明需要在什么属性上面添加过渡效果

div{
    width:100px;
    height:100px;
    border-radius: 50%;
    background:#f40;
    transition-duration:1s;
    transition-property:width;
}
div:hover{
    height:150px;	
    width:150px;
}

这里transition-property值仅为width，意思是只给width加动画，所以会呈现这种效果，同样如果换成了height，那么将会是变高才有动画。  

我们发现，第一个案例我们并没有写transition-property，但是案例中width和height属性是同时变化的，那是因为transition-property的默认值为all，只要不写这个属性，那就是全部变化都会执行动画。

 3：transition-timing-function：指定transition效果的转速曲线

div{
    width:100px;
    height:50px;
    background:#f40;
    transition-duration:2s;
    transition-timing-function:ease-in-out;
}
div:hover{
    width:250px;
}

transition-timing-function的作用就是改变动画在每一帧的快慢。这里transition-timing-function仅展示值为ease-in-out的动画效果，可以理解为慢-快-慢。其他的不做展示，可以参考下表进行理解。

4：transition-delay：定义transition效果延迟多久开始执行 

div{
    width:100px;
    height:100px;
    border-radius: 50%;
    background:#f40;
    transition-duration:1s;
    transition-delay:1s;
}
div:hover{
    height:150px;	
    width:150px;
}

这里transition-delay的值为1s，意思是动画将在延迟一秒后执行