CSS 转换 VS 过渡

Question

CSS 转换和转换之间的主要区别是什么？

这两者都用于更改对象的当前形状/状态。(你可以用JS等做漂亮的动画。

但我仍然不清楚在哪里和为了什么使用哪一个。

Answer 1

transition和transform是单独的CSS属性，但您可以提供transform transition以"动画化"转换。

---

transition

CSS transition 属性侦听对指定属性的更改(背景颜色、宽度、高度等(随着时间的推移。

transition属性语法：

selector {
    transtion: [property-name] [duration] [timing-function] [delay]
}

例如，以下样式会在悬停后 1 秒内将div 背景的颜色更改为橙色。

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: background-color 1s;
  /* timing function and delay not specified */
}
div:hover {
  background-color: orange;
}

<div></div>

---

transform

CSS transform 属性在 X、Y 或 Z 轴上旋转/缩放/倾斜元素。它的行为与 transition .简而言之，在页面加载时，元素只会显示旋转/倾斜/缩放。

现在，如果您希望发生旋转/倾斜/缩放，例如当用户将鼠标悬停在元素上时，您需要"转换"转换"。

方法如下：由于 transition 属性的功能是侦听其他 CSS 属性中的更改，因此您实际上可以提供transform作为参数，以根据所需的触发器(例如，悬停操作(transition和"动画化"转换。

transform属性语法

select {
    transform: [rotate] [skew] [scale] [translate] [perspective]
}

例如，以下样式将在悬停时旋转div 1 秒。

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: transform 1s;
  /* timing function and delay not specified */
}
div:hover {
  transform: rotate(30deg);
}

<div></div>

Answer 2

它们是完全不同的东西。

转换：

CSS

转换允许 CSS 值中的属性更改在指定的持续时间内顺利进行。

变换：

CSS 转换

允许使用 CSS 设置样式的元素在二维或三维空间中转换。