CSS过渡效果( 学习笔记 )

过渡

一、过渡（transition）的定义:

1. 通过过渡可以指定一个属性发生变化时的切换方式
2. 通过过渡可以创建一些非常好用的效果，提升用户的体验

---

二、transition的用法：

1. transition-property：

• 指定要执行过渡的属性多个属性之间用逗号隔开
• 如果多个属性都需要过渡，则使用all关键字
• 大部分属性都支持过渡效果
• 注意过渡必须是从一个有效数值向另外一个有效数值进行过渡
• 例子：transition-property: all;

---

2. transition-duration：

• 指定过渡效果的持续时间（时间单位：s和ms ,1s=1000ms）
• 例子：transition-duration：2s;

---

3. transition-timing-function：

• 过渡的时序函数，指定过渡的执行方式
• 可选值：ease默认值，慢速开始，先加速，再减速
• linear：匀速运动
• ease-in：加速运动
• ease-out：减速运动
• ease-in-out：先加速，后减速
• cubic-bazier(值1，值2，值3，值4)：指定时序函数（贝塞尔曲线 https://cubic-bezier.com）
• steps（值）：分布执行过渡效果，可以设置第一个第二个值：end：在时间结束时执行过程（默认值），start：在开始时间执行过渡，值为2就分两步走

---

4. transition-delay：

• 过渡效果的延迟，等待一段时间后在执行过渡
• 例子：transition-delay：2s; //延迟两秒再进行过渡

---

总结：

transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间。