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 layer elements with CSS position property?

    How to Style Unique CSS Navigation Menu

    How to automatically scroll when div expands at bottom of page?

    How to rearrange several divs on window resize - jQuery or CSS

    jQuery - How to show element when another has a value

    How do I align form inputs nicely on top of a picture?

    How can I fit images in full height columns in Bootstrap?

    how to add parent class in css file?

    How to align images and urls within div trees in CSS?

    How can the common text message format be replicated purely with CSS?

    How to isolate text in a

    tag to bold without changing the format of remaining paragraph

    How to convert SVG CSS animation to pure JS code

    how to target IE 6 AND IE7 in css

    How to customize bootstrap css when using bootstrap-sass [closed]

    CSS - How to make a 100% height div not overlap it's contents when window is resized

    How to style one react component inside another?

    show hover by default using CSS

    How to color path elements in SVG?

    How to get CSS hover menus to stay on top

    How can I skin / theme a windows forms application [closed]

    how to let -ms-grid adaptive width layout in win8 html and javascript metro app?

    How to make a website run faster?

    How to add border inner side of image using CSS

    How to create CSS/JavaScript circles grid

    How to have video faded when paused - HTML

    How to stop an image shrinking on responsive site whilst also keeping it centred

    How to set each type of page transition to a specific page? (css animations)

    css book on css box model, how block element width can get affected etc

    How to position contents according to zoom level?

    How can I add my custom style for my bootstrap navbar?