什么是过渡呢？过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。
过渡的属性：
属性 描述 css transition 简写属性，用于在一个属性中设置4个过渡属性 3 transition-property 规定应用过渡的css属性的名称 3 transition-duration 定义过渡效果所花费的时间。默认为0 3 transition-timing-function 规定过渡效果的时间曲线。默认是“ease” 3 transition-delay 规定过渡效果何时开始。默认是 0 3
transition:是一个简写属性，用于设置四个过渡属性，所以说我们用的时候只写这个属性就行了。
transition-property：规定应用过渡效果的属性（可以设置单个属性，也可以写所有属性（all））。请始终设置这个属性，否则忽略这个属性。（就像你想给你的心上人打电话，但是你不知道TA的手机号你能给他打电话吗？）
transition-duration：规定完成效果所需要的时间（以秒或者毫秒来计算）。这个也是必须写的属性（假如没有就不执行，因为默认值为 0 ）
transition-timing-function：规定过渡效果的速度曲线。默认是“ease”。他有6个字属性：
linear 规定以相同的速度开始至结束的过渡效果。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bizier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能是值范围为 0~1 之间
transition-delay:规定过渡效果从何时开始，即我们常说的延时。
效果：0.6s后开始执行过渡效果。
代码
我要评论 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>过渡效果</title>
6 <style type="text/css">
7 .square{
8 width: 100px;
9 height: 100px;
10 background: red;
11 transition: width 0.4s linear 0.6s;/*规定属性width 0.4s 匀速 完成过渡效果 延时0.6s完成*/
12 }
13 .square:hover{width: 300px;}
14 </style>
15 </head>
16 <body>
17 <div class="square"></div>
18 </body>
19 </html>
2.转换
转换：向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动、或者倾斜。
属性：
1.转换
nooe 不进行转换
matirx(n,n,n,n,n,n) 定义转换，使用6个值的距阵
matirx3d(n,n,n,n,n,n,n,n,n,n,n,n) 定义3d转换，使用16个4*4的矩阵
二维矩阵：matirx(n,n,n,n,n,n) ，就是基于水平方向和垂直方向重新定位元素
三维矩阵：matirx(n,n,n,n,n,n) ，就是基于 X，Y，Z 三个方向重新定位元素
此属性涉及数学中的矩阵，我在这里这是点一下就好。
2.移动
translate(x,y) 定义2d移动，即可向左右、上下移动
translate3d(x,y,z) 定义3d移动，x y z 3个方向转动
translate(x,y) 平面移动，X为x轴方形移动，正为向右，负为向左。Y为y轴移动，正为向下，负为向上
translate3d(x,y,z) 同 translate(x,y)一样只不过多了一个z轴移动
3.缩放
scale（x,y) 定义2d缩放
scale3d (x,y,z) 定义3d缩放
4.旋转
rotate(x,y) 定义2d旋转
rotate3d(x,y,z) 定义3d旋转
缩放和移动就很简单了，大家从字面上就可以理解。
因为这个只是在给大家举例子，所一说我就没有加前缀，希望大家在写的时候加上前缀。谢谢大家！！
.square { width: 100px; height: 100px; background: red } .square:hover { width: 300px }
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
网友评论