css动画效果之transition(动画过渡效果属性)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <!-- transition:动画过渡效果属性 功能:使css的属性值在一定的时间内平滑的过渡。这种效果可以在鼠标 点击、划过、获取焦点或对元素任何改变中触发,并圆滑的以动画效果改变css属性值。 可定义的属性有: transition-property:设置那些属性进行过渡,all:所有属性 transition-duration:完成过渡动画效果的时间,默认是0 transition-timing-function:设置动画的缓动效果,默认是ease(逐渐变慢)。 (其他常用值:ease-in,加速;ease-out,减速;ease-in-out,加速然后减速) transition-delay:设置动画开始的延迟时间,默认是0 示例: 使用transition,实现过渡动画。一个红色的正方形,当鼠标移入该区域后,红色正方形放大一倍,并且颜色变为灰色。鼠标移开,还原到初始状态。 --> <style> .box{ width: 100px; height: 100px; margin:50px auto; background-color: #f00; /* 为离开的动作也添加过渡效果 */ transition: all 1s ease-in 1s; } .box:hover{ height: 200px; width: 200px; border-radius: 50%; background-color: #666; /* transition-property:width,height,border-radius; transition-duration: 1s; transition-timing-function:ease-in; transition-delay:1s; */ transition: all 1s ease-in 1s; } </style> <body> <div class="box"></div> </body> </html>
Document