CSS3 动画原理

CSS CSS 评论

2D/3D 旋转

动画的概念：https://zhuanlan.zhihu.com/p/19855108

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
div {
  /* background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); */
  width: 10px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  color: rgba(0, 0, 0, 0);
  background-color: #f35626;
  background-clip: text;
  /* -webkit-text-fill-color:transparent; */
}

div:hover {
  height: 300px;
  width: 600px;
  text-align: center;
  background-color: wheat;
  color: rgb(66, 66, 66);
  /* transition: 2s height ease, 2s background-color linear, 2s 2s width ease-in, 4s 4s color; */
  /** 只对block级元素生效 */
  /** 动画持续时长 */
  transition-duration: 2s,2s,2s,4s;
  /** 动画渐变的属性 */
  transition-property: height, background-color, width, color;
  /** 延迟播放动画 */
  transition-delay: 0s,0s,2s,4s;
  /** 动画过渡函数 */
  transition-timing-function: ease,linear,ease-in,normal;
}
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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html {
      font-size: 14px;
    }

    .flex {
      position: fixed;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      justify-content: center;
      overflow: hidden;
    }

    .box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      background-color: #fff;
      /* 2D属性  translate移动(x,y) scale缩放(x,y) rotate角度(deg)  skew倾斜转换(deg,deg)*/
      transform: translate(20px,20px) scale(1.1,1.2) rotate(20deg) skew(20deg,40deg);
      -webkit-transform: translate(20px,20px) scale(1.1,1.2) rotate(20deg) skew(20deg,40deg);
      /* 设置旋转元素的基点位置 */
      transform-origin: 10% 20%;
      -webkit-transform-origin: 10% 20%;
      /* 效果开始时间 */
      transition-delay: 1s;
      /* 效果持续时间 */
      transition-duration: 3s;
      /* 持续时间效果 */
      transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }
  </style>
</head>

<body>
  <!-- 弹性盒子 -->
  <div class="flex">
    <!-- 绝对居中 -->
    <div class="box">
    </div>
  </div>
</body>

</html>
  • 3D效果直接在属性后面添加3d，属性值相对性变成(x,y,z)三维坐标

3D加速

  • 适用情况

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围：

  1. 使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
  2. 页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
  3. 使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。
  4. 编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)
  5. 使用很多PNG图片拼接成CSS Sprite时

CSS3动画与关键帧 Animation & @keyframes

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html {
      font-size: 14px;
    }

    .flex {
      position: fixed;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      justify-content: center;
      overflow: hidden;
    }

    .box {
      position: relative;
      width: 100px;
      height: 100px;
      border: 1px solid transparent;
      background-color: #000;
      /* 开启3D加速 */
      transform: translate3d(0, 0, 0);
      /* 动画名称 */
      animation-name: do;
      /* 动画持续时间 */
      animation-duration: 5s;
      /* 动画开始时间 */
      /* animation-delay: 1s; */
      /* 动画播放次数 */
      animation-iteration-count: infinite;
      /* 动画播放速率 */
      animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);
      /* 动画是否保留属性值 */
      animation-fill-mode: forwards;
    }

    /* 关键帧 */
    @keyframes do {
      10% {
        border-radius: 10%;
      }

      20% {
        border-radius: 20%;
        transform: rotate(30deg);
      }

      30% {
        border-radius: 30%;
        transform: rotate(90deg);
      }

      40% {
        border-radius: 40%;
        transform: rotate(180deg);
      }

      50% {
        border-radius: 50%;
      }

      60% {
        border-radius: 40%;
        transform: rotate(180deg);
      }

      70% {
        border-radius: 30%;
        transform: rotate(90deg);
      }

      80% {
        border-radius: 20%;
        transform: rotate(30deg);
      }

      90% {
        border-radius: 10%;
      }

      100% {
        border-radius: 0;
      }
    }
  </style>
</head>

<body>
  <!-- 弹性盒子 -->
  <div class="flex">
    <!-- 绝对居中 -->
    <div class="box">
    </div>

    <div class="turn"></div>
  </div>
</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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
* {
  padding: 0;
  margin: 0;
}

body{
  background: rgb(17, 75, 122);
  color: #fff;
}
.box{
  text-align: center;
}
.title{
  position: relative;
  top: -45px;
  animation-name: title;
  animation-delay: 1s;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes title{
  0%{
    top: -45px;
  }
  100%{
    top: 200px;
  }
}

.content{
  max-width: 960px;
  margin: auto;
  padding: 30px;
  position: relative;
  top: 200px;
  left: -100%;
  text-align: left;
  font-size: 14px;
  line-height: 2;
  text-indent: 24px;
  animation-name: content;
  animation-delay: 2s;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes content{
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

.btn{
  position: relative;
  top: 220px;
  display: inline-block;
  font-size: 14px;
  text-indent: 0;
  line-height: 2;
  padding: 0.5rem 1rem;
  border: 1px solid #fff;
  text-decoration: none;
  color: #fff;
  opacity: 0;
  animation-name: btn;
  animation-delay: 5s;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  transition-property: transform;
  transition-duration: 2s;
  transition-timing-function: linear;
}

.btn:hover{
  transform: rotateY(180deg);
}

@keyframes btn{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/assets/transitions.css">
</head>

<body>
  <div class="box">
    <h1 id="title" class="title">Welcome to page</h1>
    <div id="content" class="content">
      《哈姆雷特》（英语：Hamlet）又名《王子复仇记》，是莎士比亚于1599年至1602年间的一部悲剧作品，是他最负盛名和被人引用最多的剧本。习惯上将本剧与《麦克白》、《李尔王》和《奥赛罗》一起，并称为莎士比亚的“四大悲剧”。
      戏剧中叔叔克劳迪谋害了哈姆雷特国王，篡了王位，并娶了国王的遗孀葛簇特；王子哈姆雷特因此为父王之死向叔叔复仇。剧本细致入微地刻画了伪装的、真实的疯癫 —— 从悲痛欲绝到假装愤怒 —— 探索了背叛、复仇、乱伦、堕落等主题。
    </div>
    <a href="#" class="btn">Read More</a>
  </div>
</body>

</html>

Anily前端 & Web Developer

任何值得做的事就值得把它做好。- Whatever is worth doing is worth doing well.