# 过渡模块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{}
