41

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

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

但是我仍然不清楚在哪里使用哪个以及用于什么。

4

2 回答 2

73

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

transition

CSStransition属性监听指定属性（背景颜色、宽度、高度等）随时间的变化。

transition属性语法：

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

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

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

CSStransform属性在 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>

于 2013-10-04T16:48:42.040 回答
29

它们是完全不同的东西。

过渡：

CSS 过渡允许 CSS 值的属性更改在指定的持续时间内平滑发生。

变换：

CSS 变换允许使用 CSS 样式化的元素在二维或三维空间中进行变换。

于 2013-10-04T16:50:04.313 回答