css3新增模块 过渡模块

css3新增模块

过渡

hover这个伪类选择器也可以用到其他模块

transition-property:width;
/*告诉系统哪一个属性需要执行过渡*/
transition-duration:5s;
/*告诉系统属性需要执行过渡的持续时间*/

过度的三要素

1. 必须有属性发生变化
2. 必须必须告诉系统哪属性发生变化需要执行过渡效果
3. 必须告诉系统过渡效果的持续时长

注意

css是层叠样式表，如果在前一个属性后给相同的属性定义不同的样式就会被后面样式覆盖
例如：

transition-property:width;
transition-duration:5s;
transition-property:height;
transition-duration:2s;
/*这两个过渡效果就会使前面两个过渡效果失效*/
/*多个属性同时执行,用','隔开*/
transition-property:height,width;
transition-duration:2s,5s;

过渡的其他属性

transition-delay:2s;
/*告诉系统延迟多少秒后执行过渡*/
transition-timing-fuction:;
/*告诉系统过渡动画移动速度![timing-fuction.png](:storage\79624a64-b7b0-4865-962c-a24c08d0c8a2\21272e50.png)*/

transition-timing-fuction详细用法:

过渡属性的缩写

transition:过渡属性 过渡时长 运动速度 延迟时间；

缩写连写的注意，和分开写一样，用逗号隔开即可

多个属性同一效果

transition:all 时长 速度 延迟;