ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
transition属性允许css的属性值在指定的时间内进行过度,也就是执行动画效果。它是以hover,focus,active等伪类作为动画触发的条件。也就是动画效果必须基础悬停,点击等事件才能触发。 <br/> ### 参数 #### transition-property:指定过渡或动态模拟的css属性,也就是指定究竟是哪个属性要执行动画效果。 1.none 没有属性会获得过渡效果。 2.all 所有属性都将获得过渡效果。 3.property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。 <br> #### transition-duration:指定完成过渡所需的时间。单位是秒或毫秒 <br> #### transition-timing-function:指定过渡函数 1.ease:逐渐变慢(默认值) 2.linear:匀速 3.ease-in:加速 4.ease-out:减速 5.ease-in-out:先加速后减速 ![](https://box.kancloud.cn/2016-05-03_572890136886b.png) <br> #### transition-delay:开始执行动画的延迟时间,单位是秒或毫秒 说完了transition的属性,下面就该说如何使用transition来完成动画 效果。这里就需要用到伪类来作为动画的触发条件了。 伪类中指定了动画的最终样式。 ~~~ div:hover{ border-radius:0;//为了方便这里没有写css hack } ~~~ 上述代码指定了动画效果完成之后圆角为0。 ~~~ div{ width:100px; height:100px; border-radius:50px;//设置动画的初始样式 transition-property:border-radius;//指定需要执行动画的属性 transition-duration:2s;//整个动画完成需要2s transition-timing-function:linear//匀速 transition-delay:.2s//延迟0.2s } ~~~ 当鼠标移动到div上时,在经过0.2秒的延迟之后div匀速从正方形变成圆形,整个动画(不包括延迟)花费2秒。 如果property参数为all,那么所有与伪类相同的属性都将会执行动画效果。 <br/> 也可以将transition所有属性都写在一起 ~~~ div{ width:100px; height:100px; border-radius:50px; transition:border-radius 2s linear .2s; } ~~~ transition自然避免不了要写兼容各浏览器的hack,所以为了减少工作量还是尽量把属性都写在一起。