css中transition-transform-animation的用法

对css中的transition(过渡)-transform(转换)-animation(动画)认识的不够清楚，今天就放一起集中解决了。

1.transition-过渡

元素属性的过渡效果，通常配合hover实现元素初始样式到hover中样式的过渡，语法如下：

1 transition: property duration timing-function delay;

property：属性，可以写all
duration：持续时间
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>

css中transition-transform-animation的用法

猜你喜欢