css设置动画匀速运动,CSS3 transition动画

1.transition动画

(1)transition-property 设置过渡的属性，比如：width height background-color

(2)transition-duration 设置过渡的时间，比如：1s 500ms

(3)transition-timing-function 设置过渡的运动方式，常用有linear(匀速)| ease(缓冲运动)

(4)transition-delay 设置动画的延迟

(5)transition：property duration timing-function delay; 同时设置

transition动画

.box{

width: 100px;

height: 100px;

background-color: yellow;

transition: all 500ms ease,background-color 2s ease;

}

.box:hover{

width: 500px;

height: 500px;

background-color: red;

}

例子二：图片说明文字

图片

.box{

width: 320px;

height: 405px;

margin: 50px auto 0;