分不清css中transform、animation、transition、translate？这下妈妈再也不用担心了
css的这几个属性transform、transition、translate、animation非常容易混淆，真的是服了。。。
transform 变形
主要应用于元素的 2D 或者 3D转换，可以将元素 旋转、缩放、移动、倾斜等。 有以下的属性:
-
旋转 rotate(deg): 是用来控制元素旋转角度的， 顺时针旋转给定的角度，允许负值。正数为顺时针旋转，负数为逆时针旋转
- transform-origin：旋转元素一般配合着transform-origin属性，transform-origin是用来设置旋转点的
- 可以结合animation，实现一些动画效果
@keyframes test{ 0%{ transform: rotate(0)} 100%{ transform: rotate(360deg);} } - 2D旋转
rotateX()、rotateY()、rotateZ()，分别表示绕x轴、y轴和z轴的旋转，也可以用于实现3D效果transform: rotate(45deg); // 顺时针旋转45度 - 3D旋转
transform: rotate3d(x,y,z,angle);- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值
- y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值
- z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值
- angle：一个角度值，指定在3D空间旋转角度。
-
缩放 scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）
transfrom:scale(x,y);- x：表示水平方向缩放的倍数
- y：表示垂直方向缩放的倍数，y为可选参数，y不设置则表示x，y同时缩放相同倍数
- 缩放不会影响元素的布局空间，即即使元素被缩放，它仍然占据原始的空间
- 参数小于1，元素将缩小；如果参数大于1，元素将放大
- 也可以结合animation使用
@keyframes test{ 0%{ transform: scale(0.5)} 100%{ transform: scale(1.5);} }-
3d
transform: scale3d(2, 1.5, 1)x 轴上被放大了两倍（2），在 y 轴上被放大了 1.5 倍（1.5），而在 z 轴上保持不变（1）
scaleX()、scaleY()、scaleZ()是 CSS 的 transform 属性的内置函数，用于在二维或三维空间中调整元素的大小。这些函数分别允许你在 X 轴、Y 轴和 Z 轴上缩放元素
- 注意：scaleZ() 的效果在二维屏幕上可能不可见，因为它是在屏幕垂直方向上进行的缩放
-
matrix3d: ，css矩阵。
CSS的matrix()函数是一个强大的工具，它允许你在一个单独的属性中执行多个2D转换操作，如旋转、缩放、倾斜和移动。matrix()函数通过接受六个参数来创建一个3x3的矩阵，这些参数定义了元素的转换方式
matrix(a, b, c, d, e, f)
- a 和 d 控制缩放。当它们的值大于1时，元素会放大；当值在0和1之间时，元素会缩小
- b 和 c 控制倾斜。这些值表示在x轴和y轴上的倾斜角度，通常与三角函数一起使用
- e 控制水平方向的移动（即x轴的平移）。正值会向右移动元素，负值会向左移动
- f 控制垂直方向的移动（即y轴的平移）。正值会向下移动元素，负值会向上移动
可以使用matrix()函数来模拟其他转换函数的效果，如translate()、scale()、rotate()和skew()。例如，以下代码将元素向右和向下移动50个像素
transform: matrix(1, 0, 0, 1, 50, 50);
等同于
transform: translate(50px, 50px);
虽然matrix()函数提供了极大的灵活性，但它也相对复杂，需要一定的数学知识才能完全理解(真的是从入门到入土。。。)因此，在不需要执行多个同时转换的情况下，使用专门的转换函数（如translate()、scale()等）可能更为简单和直观(撤了撤了)
-
扭曲 skew: 这个属性是用来制作倾斜度的，元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）
transform: skew(x,y);- x：x轴(水平方向)倾斜度数
- y：y轴(水平方向)倾斜度数
-
移动 translate(x,y): 平移，传进 x,y值，代表沿x轴和y轴平移的距离
/* 2d */ transform: translate(-50%, -50%)- x：表示元素在X轴上的移动距离，可以是px也可以是百分比
- y：表示元素在Y轴上的移动距离，可以是px也可以是百分比
- 3D：
translate3d(x, y, z)
translate3d(100px, -50%, 0)-
x,y参数和2d是一样的
-
z：表示元素在Z轴上的平移长度。这个值通常是一个固定的长度，因为使用百分比值在Z轴上平移没有实际的意义，因为Z轴通常是屏幕垂直方向上的假想轴
-
我们经常使用的居中技术就是用到了 translate
.parent {
position: relative;
height: 100vh;
}
.son {
position: absolute;
width: 200px;
height: 200px;
background: pink;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
translate 他是transform的一个属性值！！！！
主要控制目标元素的移动（2D、3D）。目前为止还可以说是一个 CSS 变换函数，赋值给transform使用，而不是一个完全可以单独使用的css属性!!!
需要注意的是
- 当x和y的值为百分比时：translate函数的移动距离是参考元素自身的宽度和高度，而不是其父元素的宽度和高度
- translate函数会改变元素的位置，但它不会改变元素在文档流中的布局空间。换句话说，当你使用translate函数移动一个元素时，该元素在视觉上的位置会发生变化，但它在文档流中的位置保持不变，其他元素仍然会占据原始位置的空间。这种行为与某些其他布局技术（如使用position: absolute或float）不同，这些技术会改变元素在文档流中的位置，从而影响其他元素的布局。
animation 关键帧动画
以前的前端动画真的是让人头大，但是自从有了CSS3新增的动画属性，就一个字：爽
它有以下属性：
-
animation-name：keyframename 动画名字，动画名称是在@keyframes规则中定义的
-
animation-duration：time 完成动画所花费的时间，单位秒或毫秒，例：3s、3000ms。
-
animation-timing-function：规定动画的速度曲线，默认ease，还有一些值，比如说
linear：从头到尾的速度相同
ease（默认）：以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
cubic-bezier(n,n,n,n)：动画以低速开始和结束贝塞尔曲线（可以用工具或者网站生成）
-
animation-delay：time 延迟（等待）多长时间再执行动画（单位秒或毫秒）
-
animation-iteration-count： n | infinite 规定动画播放次数其值可以是一个整数，默认1；n（次数），或者infinite（表示动画将无限次重复）
-
animation-direction：normal | alternate | reverse | alternate-reverse 规定是否应该轮流反向播放动画；
normal：默认值，正常播放
alternate：交替播放
reverse：倒序播放
alternate-reverse：反向交替播放
-
animation-fill-mode：none | forwards | backwards | both 规定动画在播放之前或之后，其动画效果是否可见。
none：默认值，动画不应用任何填充模式
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards：动画开始前，元素保持第一个关键帧的样式（在第一个关键帧中定义）
both：动画前后都应用填充模式，即同时应用forwards和backwards
-
animation-play-state：paused | running 规定动画正在运行还是暂停，paused（动画已暂停），running（动画正在播放）
举个例子：
延迟1秒执行，从左0往右200px无限循环来回移动
div {
width: 100px;
height: 100px;
background: red;
animation-name: test;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
/*
简写属性
animation: test 1s linear 1s infinite alternate;
*/
}
@keyframes test {
0% {
left: 0;
}
100% {
left: 200px;
}
}
/*
keyframes name：动画名称
from：起始，等同0%
to：结束，等同100%
*/
当然也可以把过程分为多个阶段，这样动画更细腻
@keyframes test {
0% { left: 0; top: 0;}
25% { left: 0; top: 50px;}
50% { left: 50px; top: 50px;}
75% { left: 50px; top: 0;}
100% { left: 0; top: 0;}
}
transition 过渡
CSS过渡属性，允许CSS属性值在一定的时间区间内平滑的过渡，需要事件的触发（js的事件、css的伪类、媒体查询触发、CSS动画触发），例如单击、获取焦点、失去焦点，等
transition属性是一个简单的动画属性,为一个元素在不同状态切换的时候定义不同的过渡效果,可以说它是animation的简化版本
transition{ transition-property transition-duration transition-timing-function transition-delay}
.button {
background-color: blue;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: red;
}
上述子属性的顺序是固定的，必须按照指定的顺序排列
-
transition-property：指定应用过渡效果的CSS属性名称（width height等）。可以设置为none（无过渡效果）、all（所有属性都有过渡效果）或特定的CSS属性（如transform）
.btn { width: 100px; height: 100px; background-color: red; transform: rotate(0deg); transition: transform 2s; /* 指定过渡属性为 transform，持续时间为 2 秒 */ } .btn:hover { transform: rotate(360deg); /* 鼠标悬停时旋转 360 度 */ }在这个例子中，.btn 的初始状态是没有旋转的（rotate(0deg)）。当鼠标悬停在 .btn 上时，它会在 2 秒内逐渐旋转 360 度，这是因为我们为 transform 属性设置了 transition 效果。这样，元素的旋转就会以一种平滑的过渡方式发生，而不是立即跳转到最终状态
-
transition-duration：定义过渡效果完成所需的时间，以秒（s）或毫秒（ms）为单位
-
transition-timing-function：规定速度效果的速度曲线。预设的值包括ease（慢到快再到慢）、linear（匀速）、ease-in（慢到快）、ease-out（快到慢）和ease-in-out（慢到快再到慢）。此外，还可以使用cubic-bezier(x1, y1, x2, y2)函数定义自定义的速度曲线
-
transition-delay：定义过渡效果开始前的延迟时间，以秒（s）或毫秒（ms）为单位
是不是有点眼熟？和 animation 关键帧动画的前四个参数是一样的
一些常见的可以使用 transition 的属性
- 背景相关属性
- background-color：背景颜色
- background-position：背景图片的位置
- background-size：背景图片的大小
- 其他背景相关的属性，如background-image（但需要注意，仅当背景图像是渐变或颜色时，才支持过渡）
- 边框相关属性
- border-color：边框颜色
- border-width：边框宽度
- border-style：边框样式
- 尺寸和位置相关属性
- width：元素宽度
- height：元素高度
- margin：元素的外边距
- padding：元素的内边距
- top、right、bottom、left：元素的位置
- 文本相关属性
- color：文本颜色
- font-size：字体大小
- line-height：行高
- text-shadow：文本阴影
- 透明度相关属性
- opacity：透明度
- 其他属性
- transform：元素变换，如旋转、缩放等
- outline：元素的外轮廓
- box-shadow：元素的盒子阴影
- clip：元素的裁剪区域
- visibility：元素的可见性
注意：
对于某些属性，如height和width，如果它们的改变是由内容的变化引起的（例如，文本内容的增减），那么这种变化通常不会触发transition效果。但是，如果height和width是通过CSS类或其他方式被程序化地改变，那么它们就可以支持transition效果
转载自:https://juejin.cn/post/7342406486911516698