CCS过渡
过渡能让使用过渡的元素在样式发生变化时(例如鼠标划过,单击按钮,点击图片时,颜色,尺寸,位置等样式发生变化),定义变化过程中的动画,让变化不再是瞬间产生。 过渡样式使用transition定义,一共有四个属性 transition-property:过渡属性,比如color, opacity, width等所有可以在css中使用的属性 transition-duration:过渡持续时间 transition-timing-function:过渡速度,比如linear是匀速 transition-delay:过渡延迟,0表示立即开始 .tl:hover { color: red; font-size: 18px; } .tl { transition-property: color font-size;//可以定义多个属性同时过渡,或者使用all代表所有变化的属性 transition-duration: 2s; transition-timing-function: linear; transition-delay: 0s; } 也可以写到一起: .tl:hover { color: red; font-size: 18px; } .tl { transition: font-size linear 2s 0s, color linear 4s 0s }