如何只将CSS转换应用到转换属性

时间:2023-02-09 11:08:08

I've currently got a transform: rotate(45deg) that is applied using a checkbox :checked value, and I'm looking for a solution so the CSS transition only applies to the transform value. Right now I've got it setup like so: transition: all 1s ease. I don't want it to apply to all though, just the transform. Right now it's applying the transition to a color: change, which I'd like to get rid of.

我目前有一个转换:rotate(45deg),它使用复选框:checked value应用,我正在寻找一个解决方案,因此CSS转换只适用于转换值。现在我已经有了这样的设置:转换:所有的1。我不希望它适用于所有的,只是变换。现在它应用到颜色的转换:改变,我想把它去掉。

I feel like this should have been easy to find an answer to, but it's proven to be more difficult than I had imagined. Let me know if you have any questions. Thanks.

我觉得这个问题应该很容易找到答案,但事实证明,它比我想象的要困难得多。如果你有什么问题,请告诉我。谢谢。

Here's my code pen. The code in question is CSS lines 25-28.

这是我的代码的钢笔。问题中的代码是CSS第25-28行。

1 个解决方案

#1


5  

You can use transition: transform 1s;

你可以使用转换:变换1s;

That is shorthand for:

这是缩写:

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

For prefixes, you need:

对于前缀,您需要:

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

#1


5  

You can use transition: transform 1s;

你可以使用转换:变换1s;

That is shorthand for:

这是缩写:

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

For prefixes, you need:

对于前缀,您需要:

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