# CSS3 过渡

源码:地址 (opens new window)

# 动画属性


不是所有属性都拥有过渡效果,可支持过度效果的属性 (opens new window)

过度.gif

我们看到边框实线 -> 虚线 这个状态是没有过渡效果的

# transition-property


设置元素某些属性应用过渡效果

  • all 默认所有属性都发生过渡效果
  • 多个属性设置使用 , 逗号分隔


过度1.gif

# transitionend


用于控制过渡结束后执行的JS事件

过度2.gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transitionend</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      background: #2c3e50;
    }
    main {
      width: 100px;
      height: 100px;
    }
    div {
      position: relative;
      width: 100px;
      height: 100px;

    }

    div::before {
      content: "Mondo";
      color: #fff;
      width: 100px;
      height: 100px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #1abc9c;
      border-radius: 10px;
      transition-duration: 2s;
    }
    div::after {
      content: "imondo.cn";
      color: #fff;
      position: absolute;
      bottom: -40px;
      transform: translateX(-1000px) skew(45deg);
      transition: .5s;
    }
    div:hover::before {
      transform: rotate(360deg);
    }
    div.move::after {
      transform: translateX(0) skew(0);
    }
  </style>
</head>
<body>
  <main>
    <div></div>
  </main>
  <script>
    document.querySelector('div').addEventListener('transitionend', function(e) {
      console.log(e)
      this.classList.add('move')
    })
  </script>
</body>
</html>
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

# transition-duration


用于设置过渡时间,需要注意以下几点

  • 可使用单位为 ms 毫秒、s 秒
  • 默认值为 0s 不产生过渡效果
  • 一个值时,所有属性使用同样的时间
  • 二个值时,奇数属性使用第一个,偶数属性使用第二个
  • 变化属性数量大于时间数量时,后面的属性再从第一个时间开始重复使用
transition-property: background, width, height, transform;
transition-duration: 200ms, 2s;
1
2

过度3.gif

# transition-timing-function


设置过渡效果的速度,控制运行轨迹

可以参考https://cubic-bezier.com/ (opens new window)网站体验效果

# steps


步进速度,步进帧动画过渡效果;过渡使用阶梯形式呈现

选项 说明
steps(n,start) 设置n个时间点,第一时间点变化状态
steps(n,end) 设置n个时间点,第一时间点初始状态
step-start 等于steps(1,start),可以理解为从下一步开始
step-end 等于steps(1,end),可以理解为从当前步开始
transition: 60s;
transition-timing-function: steps(60, start);
1
2

# 步进时钟

过度4.gif

# transition-delay


设置延迟过渡时间

  • 默认为0s即立刻开始过渡
  • 值可以为负数
  • 变化属性数量大于时间数量时,后面的属性再从第一个时间开始重复使用


过度5.gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯CSS图片切换</title>
  <style>
    p {
      width: 150px;
      height: 150px;
      background: #2980b9;
      border-radius: 50%;
      transition-property: width, height, background, border-radius;
      transition-delay: 0ms, 2s, 4s, 6s;
      transition-duration: 2s;
    }
    p:hover {
      width: 250px;
      height: 250px;
      border-radius: 0;
      background: #16a085;
    }
  </style>
</head>
<body>
  <p></p>
</body>
</html>
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

# transition


统一设置过渡规则

  • 必须设置过渡时间
  • 延迟时间放在逗号或结束前
transition: width linear 2s,
  height ease 2s 2s,
  background ease-in 2s 4s,
  border-radius 2s 6s;
1
2
3
4

# 红心点赞


过度6.gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>红心点赞</title>
  <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      background: #34495e;
    }
    div {
      position: relative;
      display: flex;
    }
    i.fa {
      position: absolute;
      font-size: 100px;
      transition: 1s;
      color: #95a5a6;
    }
    div.heart i.fa:nth-of-type(1) {
      transform: scale(3);
      opacity: 0;
      color: #e74c3c;
    }
    div.heart i.fa:nth-of-type(2) {
      transform: scale(1);
      opacity: 1;
      color: #e74c3c;
    }
  </style>
</head>
<body>
  <div>
    <i class="fa fa-heart"></i>
    <i class="fa fa-heart"></i>
  </div>
  <script>
    document.querySelector('div').addEventListener('click', function(){
      if (this.classList.contains('heart')) {
        this.classList.remove('heart')
      } else {
        this.classList.add('heart')
      }

    })
  </script>
</body>
</html>
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
更新于: 10/14/2020, 3:24:10 AM