过渡三要素
- 必须要有属性发生变化
- 必须告诉系统哪个属性需要执行过渡效果
- 必须告诉系统过渡效果持续时长
-
注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
过渡模块-其它属性
告诉系统延迟多少秒之后才开始过渡动画
transition-delay: 2s;
告诉系统过渡动画的运动的
transition-timing-function: linear;(匀速)
transition-timing-function: ease-in-out(先减速后加速)
过渡连写
1.过渡连写格式
transition: 过渡属性 过渡时长 运动速度 延迟时间;
2. 过渡连写注意点
- 和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
- 连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
- 如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 0s;
编写过渡套路
- 不要管过渡, 先编写基本界面
- 修改我们认为需要修改的属性
- 再回过头去给被修改属性的那个元素添加过渡即可
网友评论