Only transition a transform in css? - html

Question

Hello I would like to transition only my css transform and nothing else. It hard to explain through text so check out my code below:
HTML:
<section class="success">
<ul>
<li>
<div class="circle-spin-wrapper">
<img src="ellipse_sm_blue.png" >
</div>
</li>
</ul>
</section>
CSS:
.circle-spin-wrapper {
transition: all 1s ease;
}
.success li:hover .circle-spin-wrapper {
transform:scale(1.25);
position: relative;
top: 95px;
}
As you can see, I have a div and when you hover over it, it scales by 1.25. It also moves down 95 px by, top: 95px;
The transition works, but it transitions both the scale(1.25) as well as the top: 95px.
I would like to make it so the transition (transition: all 1s ease;) only works on the transform:scale(1.25) and not the top: 95px.
I know it has something to do with the "all" keyword in the transition css, but I dont know what to replace it with to only target the transform.
I tried replacing "all" with "transform" and "scale" and it didn't work.
Does anyone have any suggestions?
Thanks!

Answer 1

I tried replacing "all" with "transform" and "scale" and it didn't work.
Replacing "all" with "transform" is exactly what you should be doing - that will result in the transition applying only to the transform property. It's tough to debug why it isn't working without seeing the rest of the code - can you set up a quick CodePen?

Answer 2

.circle-spin-wrapper {
transition: transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
}
.success li:hover .circle-spin-wrapper {
transform: scale(1.25);
position: relative;
top: 95px;
}
<section class="success">
<ul>
<li>
<div class="circle-spin-wrapper">
<img src="test.jpg">
</div>
</li>
</ul>
</section>
this should work. note: "-webkit-transition: -webkit-transform 1s ease;" is for safari

Answer 3

.circle-spin-wrapper {
transition: transform 1s ease;
}
But it looks buggy since .circle-spin-wrapper has no width set, so it's the full width of the page, which means .circle-spin-wrapper becomes 125% of the width of the page and the image inside moves out of the page.
Solution? Set a width on .circle-spin-wrapper.

Answer 4

As you said, instead of all in your transition use transform. It is working actually!
Maybe its the vendor prefixes that you are missing. Try adding that too.
.circle-spin-wrapper {
transition: transform 1s ease;
}
.success li:hover .circle-spin-wrapper {
transform:scale(1.25);
position: relative;
top: 95px;
}
<section class="success">
<ul>
<li>
<div class="circle-spin-wrapper">
<img src="http://placehold.it/50x50" >
</div>
</li>
</ul>
</section>