如何仅将 CSS 过渡应用于 transform 属性

Posted 2023-03-06

【中文标题】如何仅将 CSS 过渡应用于 transform 属性

【英文标题】：How to apply a CSS transition only to the transform property

【发布时间】：2014-02-14 21:32:14

【问题描述】：

我目前有一个transform: rotate(45deg)，它使用复选框:checked 值应用，我正在寻找一种解决方案，以便CSS 过渡仅适用于转换值。现在我的设置如下：transition: all 1s ease。我不希望它适用于 all，只是转换。现在它正在将转换应用到 color: 更改，我想摆脱它。

我觉得这应该很容易找到答案，但事实证明它比我想象的要困难。如果您有任何问题，请告诉我。谢谢。

这是我的 code pen。有问题的代码是 CSS 第 25-28 行。

【问题讨论】：

使用transform 代替all 但是，为了更好地用于前缀，它有点烦人。 bit.ly/1blrJOR

@Markasoftware 我已经尝试过您的建议，但它只是完全删除了过渡。 codepen.io/mtthwbckmn/pen/ByFnj

@MattBeckham 大声笑，这是因为 Chrome 支持不带前缀的 transition，但它需要 transform 的前缀，如果它不带前缀，它支持 transition。但是，您的 transition CSS 仅适用于 transforms，而不是 -webkit- 前缀，所以...是的

【参考方案1】：

你可以使用transition: transform 1s;

这是以下的简写：

transition-property: transform;
transition-duration: 1s;

对于前缀，您需要：

-webkit-transition: -webkit-transform 1s;
/* etc, for each possibility */

【讨论】：

我已经进行了更改，尝试了速记和速记 CSS，但它完全删除了过渡。 codepen.io/mtthwbckmn/pen/ByFnj

@MattBeckman - 我使用的是 chrome，你的链接和动画效果很好。

@MattBeckman 我现在看到了，看到我的更新。您还必须为实际转换添加前缀。如果您需要支持前缀，则有很多内容:(

@m59 我正在使用 Safari，但我只是在 Chrome 中尝试了那个代码笔，它做同样的事情。它会旋转，但它会立即旋转，它没有应用“1s ease”。

@MattBeckman 在 Chrome 中完美地为我工作（我只是在这里使用了 chrome 前缀）codepen.io/anon/pen/LfiFu