CODEWITHSUNDEEP
htmlcss
George Batty
George Batty

Reputation: 115

Why does my CSS rotation complete instantly?

I've been researching like mad and have used this property before, but it is just not working for me. It just displays as already rotated.

I suspect it's an issue with my browser, but just wanted to check that my code was ok.

Thanks!

.logosmall {
  width: 50%;
  border-radius: 50%;
  transform: rotate(420deg) scale(1.8);
  transition: all 0.3s ease-in-out 0s;
}
<table>
  <tr>
    <td>
      <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="logosmall" />
    </td>
  </tr>
</table>

Upvotes: 0

Views: 56

Answers (2)

George Batty
George Batty

Reputation: 115

I figured it out with some help from Justinas. I wanted it to rotate on hover so just added appropriate code:

.logosmall:hover{transform: rotate(420deg); scale(1.8); transition: all 0.3s ease-in-out 0s;}

and have the width etc in a different css that is not on hover.

Works perfectly now!

Upvotes: 0

Justinas
Justinas

Reputation: 43451

It's because transition kicks in only for changed initial value. And your initial value is already rotated image. Use @keyframes for that.

.logosmall {
  width: 50%;
  border-radius: 50%;
  animation: .3s ease-in-out 0s 1 rotateImage forwards;
}

@keyframes rotateImage {
  0% {
    transform: rotate(0) scale(0);
  }
  100% {
    transform: rotate(420deg) scale(1.8);
  }
}
<table>
  <tr>
    <td style="width:15%"><img src="https://picsum.photos/200/300" class="logosmall"></td>
  </tr>
</table>

Upvotes: 3

Related Questions