作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互的内容

属性名：transition

常见取值：

参数取值过渡的属性all：所有能过渡的属性都过渡，比如填width，则只有width能过渡过渡的时长数字+ s（秒）

注意

只有默认状态和hover状态的样式不同，才能有过渡的效果transition属性给需要过渡的元素本身加transition属性设置在不同状态中，效果是不同的，比如给hover状态设置，则只有鼠标移入时，才有过渡效果

样例代码

.box{ width:200px; height:200px; background-color:pink; /* 宽度200，悬停的时候宽度600，花费时间1秒钟 */ transition: width 1s, background-color 2s; /* 过渡所有的属性，花费时间1秒钟 */ /* transition: all 1s; */ } .box:hover{ width:600px; background-color:red; }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。