CODEWITHSUNDEEP
htmlcsscss-transitionscss-transforms
cup_of
cup_of

Reputation: 6687

Only transition a transform in css?

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!

Upvotes: 0

Views: 888

Answers (4)

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 1

Michael
Michael

Reputation: 353

.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.

Upvotes: 2

Dhawal M
Dhawal M

Reputation: 186

.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

Upvotes: 2

Jon Uleis
Jon Uleis

Reputation: 18639

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?

Upvotes: 2

Related Questions