Why does my CSS rotation complete instantly?-CodePudding

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"  />
    </td>
  </tr>
</table>

CodePudding user response：

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" ></td>
  </tr>
</table>

CodePudding user response：

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!