How to apply a CSS transition only to the transform property
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.
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 */