对css中的transition(过渡)-transform(转换)-animation(动画)认识的不够清楚，今天就放一起集中解决了。
1.transition-过渡
元素属性的过渡效果，通常配合hover实现元素初始样式到hover中样式的过渡，语法如下：
1 transition: property duration timing-function delay;
property：属性，可以写allduration：持续时间timing-function：变化的曲线delay：延迟transition
元素属性transition要定义在元素的初始样式内，hover内写目标属性值
1 div
2 {
3 width:100px;
4 transition: width 2s;
5 }
6 div:hover {width:300px;}
2.transform-转换
2D转换有元素旋转(rotate)，缩放(scale)，移动(translate)
1 transform: rotate(45deg); /*旋转的单位为deg*/ 2 transform: scale(1.2); /*缩放的倍数，1是原始大小*/ 3 transform: translate(20px, 20px); /*参数分别是水平方法和垂直方向移动的数值，移动的单位可以为像素，也可以为百分比，特别注意以百分比为单位时是相对于自身的百分比*/
3.animation-动画
需要先定义关键帧(keyframes)动画，然后绑定到元素。
关键帧keyframes的定义：
1 /* @keyframes 后是动画名称， 不同的百分比对应动画过程中不同的状态，0%是开始，100%是结束*/
2 @keyframes animationname {
3 0% {
4 background-color: #fff;
5 }
6 50% {
7 background-color: #ff4500;
8 }
9 100% {
10 background-color: #ffb90f;
11 }
12 }
动画的调用：
1 /*语法animation: name duration timing-function delay iteration-count direction fill-mode play-state;
2 name ：关键帧动画的名称
3 duration ：单次动画的持续时长
4 timing-function：速度曲线，如linear或ease
5 iteration-count：动画播放次数，数字或infinite即无限次
6 */
7 div
8 {
9 animation:animationname 5s;
10 }
完整示例如下，复制后放入HTML文件中用浏览器打开即可看到效果。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>过渡-变换-动画</title>
7 <style>
8 div {
9 color: #fff;
10 margin-top: 30px;
11 }
12
13 /* transition 通常配合hover使用，语法transition: 属性 时间 过渡曲线;
14 也可以transition: all 时间 过渡曲线; 过渡曲线可省略
15 hover时transition的属性有过渡效果，没有加过渡的其他一次性改变 */
16 .box1 {
17 height: 100px;
18 width: 100px;
19 background-color: #ffc0cb;
20 /* transition: width 2s ease; */
21 /* transition: border 2s ease; */
22 /* transition: padding 2s ease; */
23 transition: all 2s ease;
24 }
25
26 .box1:hover {
27 padding: 10px;
28 border: 10px solid #333;
29 height: 80px;
30 width: 80px;
31 background-color: #87ceeb;
32 }
33
34 /* transfrom 2d 主要有三种变换 translate平移 rotate旋转 scale缩放
35 transform-origin可以设置变换的中心点
36 而且translate在以百分比%为单位时是相对于自身的，可以结合绝对定位实现居中top:50%; left:50%; transform: translate(50%, 50%);
37 transfrom不会影响其他盒子 */
38 .box2 {
39 width: 100px;
40 height: 100px;
41 background-color: #87ceeb;
42 /* transform: translate(50%, 50%); */
43 transform: rotate(45deg);
44 /* transform: scale(1.2); */
45 }
46
47 /* animation需要先定义关键帧动画，然后再通过动画名称调用，设置动画时长 */
48 @keyframes run {
49 0% {
50 transform: translate(0);
51 }
52 100% {
53 transform: translate(200px);
54 }
55 }
56 @keyframes bgc {
57 0% {
58 }
59 50% {
60 background-color: #ff4500;
61 }
62 100% {
63 background-color: #ffb90f;
64 }
65 }
66 @keyframes rotateAnimation {
67 0% {
68 }
69 100% {
70 transform: rotate(360deg);
71 }
72 }
73 .box3 {
74 width: 100px;
75 height: 100px;
76 background-color: #90ee90;
77 animation-name: run, bgc;
78 animation-duration: 2s;
79 }
80 /* animation: rotateAnimation 2s infinite linear;
81 rotateAnimation是定义的关键帧动画名称，2s一次动画的时候，infinite永久循环，linear线性变化 */
82 .box3:hover {
83 animation: rotateAnimation 0.2s infinite linear;
84 }
85 </style>
86 </head>
87 <body>
88 <div class="box1">
89 过渡 transition
90 </div>
91 <div class="box2">
92 变换 transform
93 </div>
94 <div class="box3">
95 动画 animation
96 </div>
97 </body>
98 </html>
来源：https://www.cnblogs.com/jyughynj/p/12508592.html