How to apply a CSS transition only to the transform property


Tags: css,transform,css-transitions,transition,rotatetransform

Problem :

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.



Solution :

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 */

    CSS Howto..

    How to customize unordered list items in HTML using CSS

    How to set relative url for a css file in Django

    how to position/resize image after rotation using css/js so that the image is not positioned outside the div holding it or cropped out

    css/html, how to scale and center a logo image

    How to set CSS rule for a DIV in a LI of class UL?

    How to output CSS counter from Sass mixin

    How to I change this css psuedo button in Javascript/Jquery

    Responsive Design - Toggle a Div's Visibility - how to integrate javascript with css @media

    How to use same css for separate media query conditions

    How to make a dropdown sub-menu expand to the right in Bootstrap 3

    How to center a relative div in my case?

    How to center my text vertically in a circular div with css

    HTML/CSS: How to make “password” input show the password?

    How to create a slanting border with css

    How would I call :parent for this tooltip?

    How to make the side bar active?

    how can i change the style of scroll bar

    How to dynamically insert css vendor prefixes using jquery

    How to refer to a child class CSS

    How to align right-to-left the elements of css menu

    How to get and set CSS class in TinyMCE editor?

    How to get Jsfiddles working on a website? [duplicate]

    CSS: How to select first element in each row?

    How to center image while also aligning text to the right of image?

    How to create a full CSS box-shadow, not clipped

    How to change opacity in disabled state of image in css

    How can I correctly center this div into its container? What is wrong?

    How to make a blur effect over a shape in CSS?

    How to animate two divs in html / css to make a semi-circle transition?

    How do I properly reference files in subdirectories (in xampp) for PHP, CSS, etc. on localhost?