# 过渡模块transition

# 过渡模块transition

# 过渡模块-其他属性

# 过渡模块-弹性效果

# 过渡模块-手风琴效果

# 什么是过渡模块?

例如:

div:hover{

transition-property: 属性名称;

transition-duration: 时间(单位:s);

}

1.过渡三要素

1.1 必须要有属性发生变化

1.2 必须告诉系统那个属性需要执行过渡效果

1.3 必须告诉系统持续效果时间

注意点:

当多个属性需要同时执行过渡效果时,用逗号隔开即可

例如:

transition-property: 属性名称1,属性名称2;

transition-duration: 时间(单位:s),时间2;

}

# 过渡模块-其他属性

transition-delay: ; 告诉系统延迟多少秒之后再开始动画

transition-timing-function:  ;概述系统,运动动画的运动速度

取值:

linear

ease

ease-in

ease-out

ease-in-out

1.过渡连写格式:

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

注意点:

2.1 跟分开写一样,如果想要给多个属性添加过渡效果也是用逗号隔开:

transition: 过渡属性1 过渡时长1 运动速度1 延迟时间1,过渡属性2 过渡时长2 运动速度2 延迟时间2;

2.2 连写的时候可以省略后面的两个参数

2.3 如果多个属性的 运动速度/延迟时间/持续时间 都一样,那么可以简写为:

transition: all 5s;

# 过渡模块-弹性效果

1.编写过渡套路

1.1 先不要管过渡,先编写界面

1.2 修改我们认为需要修改的属性

1.3 再回头给被修改属性的那个元素添加过渡即可

# 过渡模块-手风琴效果

ul:hover {变窄}

ul>li:hover{}