html5 动画过渡效果,HTML5动画过度与动画效果

HTML5动画过度与动画效果

标签：Web前端

1、动画过渡属性 transition

1、transition的功能定义

transition的功能，使css的属性值在一定的时间内平滑地过渡。 这种效果可以在鼠标点击、划过、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

2、transition可定义的属性

transition-property:设置哪些属性进行过渡 transition-duration：完成过渡动画效果的时间，默认是0。 transition-timing-function:设置动画的缓动效果，默认是ease(逐渐变慢)。 其它常用值：ease-in，加速； ease-out，减速； ease-in-otlt,加速然后减速。 transition-delay:设置动画开始的延迟时间，默认是0

3、代码示例

transition-示例-Ruo.L

.box{

width: 100px;

height:100px;

margin:50px auto;

background-color:#f00;

transition:all 1s;

}

.box:hover{

width:200px;

height:200px;

border-radius:50%;

background-color:#666;

transition:all 1s ease-in 1s;

/*transition-property:width,height,border-radius;

transitio