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;

position: relative;

overflow: hidden;

}

.text{

width: 320px;

height: 100px;

position: absolute;

top: 405px;

background-color: rgba(124,119,119,0.30);

transition: all 500ms ease;

}

.box:hover .text{

position: absolute;

top: 305px;

}

夜空中最亮的星

我在思考人生

例子三：夏目

joke

@keyframes joke{

from{

left: 0px;

}

to{

left: -2136px; /*图片宽度*/

}

}

.box{

width: 534px;

height: 300px;

margin: 50px auto;

overflow: hidden;

position: relative;

}

.box img{

position: absolute;

animation: joke 1s steps(4) infinite;

}