CSS转换VS转换[关闭]

Posted 2023-03-06

【中文标题】CSS转换VS转换[关闭]

【英文标题】：CSS transforms VS transitions [closed]

【发布时间】：2013-10-11 18:26:31

【问题描述】：

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

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

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

【问题讨论】：

嗯，你想完成什么？它们确实不相似，不清楚是什么让你感到困惑。

Transi"tion" = Anima"tion" and transform = "NO" 涉及动画

【参考方案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>

【讨论】：

哦...我明白了，谢谢 :)

完美的一行解释！

变换也可以有过渡效果。我的意思是：transition: transformation 1s linear;

国际海事组织的最佳答案。

【参考方案2】：

它们是完全不同的东西。

Transitions:

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

Transforms:

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

【讨论】：

就每个用于招标的机制而言，使用转换而不是转换是否有任何性能优势？

transform 和 transition 做不同的事情——它们不能相互替代，因此比较它们的性能不一定有意义。

它们是不同的，但它们都可以用于在二维平面上移动元素来完成相同的事情。但是，两者之间存在性能差异：paulirish.com/2012/…

请注意，Paul Irish 的文章已过时。在 2020 年使用当前一代商务笔记本电脑时，使用顶部/左侧转换的动画明显比最新稳定版 Chrome（撰写本文时为 80.0.3987.122）中的 transform translate() 更平滑。 YMMV。