I'm using a bunch of elements to compose a background image and they all absolutely position around, rotating freely.
Problem is, I would like to transition only the rotation of those objects, not the top nor left properties. And apparently transition: transform 30s;
isn't allowed. I had the brilliant idea of doing
transition:all 30s ease-out; transition: left 0s; transition: top 0s;
But that also doesn't work. How can I solve this?
transform-origin By default, the origin is in the center of the element. For example, if you are using the transform: rotate property but want it to rotate not from the center, but from the top left corner, you'd use the value 0% 0% or left top . For the bottom right corner, you would use 0% 100% or right bottom , etc.
No! you cannot use transition only for certain value of transform like scale(2) .
So, what's the difference between CSS Transform and CSS Transition? The Transform property in CSS moves or modifies the appearance of an element, whereas the Transition property seamlessly and gently transitions the element from one state to another.
With CSS3 we can specify how an element changes by just describing its current and target states. CSS3 will create a smooth transition between these states by applying a cubic Bézier curve and gradually change the element appearance.
Transform is a vendor prefix
Instead of
transition:all 30s ease-out; transition: left 0s; transition: top 0s;
do
-webkit-transition: -webkit-transform $amount-of-time ease-out; -moz-transition: -moz-transform $amount-of-time ease-out; -o-transition: -o-transform $amount-of-time ease-out; -ms-transition: -ms-transform $amount-of-time ease-out; transition: transform $amount-of-time ease-out;
To animate only the rotate property, I found this works in at least Chrome:
transition: transform 2.0s;
You can set different animation times for different properties inside the one transition property:
transition: transform 2.0s, color 5.0s, font-size 1.0s;
The trick with the rotate
property specifically is that you have use the transform
property instead. Intuitively, this should work but does NOT work:
transition: rotate 2.0s; /* DOES NOT WORK */
Instead you have to use transform
in place of rotate
:
transition: transform 2.0s;
This is probably because rotate: 90deg
is shorthand for transform: rotate(90deg)
transition
is now supported in the latest versions of all major browsers. I assume if you want more compatibility with older browsers, you might do something like:
-webkit-transition: -webkit-transform 2.0s, color 5.0s, font-size 1.0s; -moz-transition: -moz-transform 2.0s, color 5.0s, font-size 1.0s; -ms-transition: -ms-transform 2.0s, color 5.0s, font-size 1.0s; -o-transition: -o-transform 2.0s, color 5.0s, font-size 1.0s; transition: transform 2.0s, color 5.0s, font-size 1.0s;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With