CSS3之transition过渡

# CSS3之transition过渡

过渡（transition）

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

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

transition-duration: 指定过渡效果的持续时间，时间单位：s 和 ms  1s = 1000ms
  transition-duration: 100ms, 2s;
  transition-duration: 2s; 

transition-timing-function: 过渡的时序函数，指定过渡的执行的方式  	
  可选值：
    ease 默认值，慢速开始，先加速，再减速    
    linear 匀速运动	
    ease-in 加速运动
    ease-out 减速运动
    ease-in-out 先加速 后减速
    cubic-bezier() 来指定时序函数
      https://cubic-bezier.com
    steps() 分步执行过渡效果
      可以设置一个第二个值：
        end ， 在时间结束时执行过渡(默认值)
        start ， 在时间开始时执行过渡       
                       
  transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); 
  transition-timing-function: steps(2, start); 

transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
  transition-delay: 2s; 

transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
  transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等,X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大,直线：linear，即cubic-bezier(0,0,1,1)

贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67 (opens new window)
```
transition-timing-function: cubic-bezier(0,1.36,.83,1.41)
```
1
案例

Last Updated: 2023/11/29, 10:30:44

← CSS响应式布局 CSS3之animation动画→