How to apply a CSS transition only to the transform property

Question

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.

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.

Answer 1

You can use transition: transform 1s;

That is shorthand for:

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

For prefixes, you need:

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