过渡使得我们可以在不使用Flash动画或者JavaScript的情况下,当元素从一种样式变换为另一种状态时为元素添加效果。
过渡动画:是从一个状态渐渐的过渡为另一种状态的过程
当前经常与 :hover一起搭配使用
一、transition基本用法
transition:要过渡的属性 花费的时间 运动曲线 何时开始;
(1)属性:想要变化的CSS属性,宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以。
(2)话费时间:单位是秒(必须写单位),比如0.5s。
(3)运动曲线:默认是ease(可以省略),linear匀速、ease逐渐慢下来、ease-in加速、ease-out减速、ease-in-out先加速再减速。
(4)单位是秒(必须写单位),可以设置延迟触发时间,默认是0s(可以省略)。
谁过渡给谁加,所以transition要写在相关的元素中,而不是元素:hover中,:hover设置过渡的变化值。
二、transition实现多种过渡效果
1、增加多个过渡效果,直接在transition后增加相应的过渡,用逗号隔开即可。
transition: width .5s , height .5s linear 1s;
2、如果想要所有的属性都实现过渡效果,可以使用all
transition: all .5s linear 1s;