Emulating the 'omgubuntu' icon rotation animation effect

[drone4four]

Have a look at the official omgubuntu logo on their homepage.

When you mouse over the logo in the top left corner, it rotates slightly. It’s kinda like twitch. It’s a nice effect. I want that for my website. But I need a test case. I used Chrome Developer Tools to look for some hints in the code. I found the img class in the HTML but the CSS is very basic and not very specific to the animation. Chrome Developer Tools identifies some CSS but I don’t see any keyframes, animations or transform properties like Chris Coyier teaches in his exhaustive guides on CSS animations in general.

Do you think omgubuntu’s effect could be achieved with CSS without any JavaScript?

What other terms could I use to narrow down my search for an effect closer to omgubuntu’s icon on their website?

Thanks for your attention.

[Shikkediel]

Looks pretty basic:

.site-logo {
  transition: 200ms all ease;
}

.site-logo:hover {
  transform: rotate(-5deg);
}

[drone4four]

You’re right. I created an awesome testcase: https://codepen.io/Angeles4four/pen/mBGNMr?editors=1100

Thank you, @Shikkediel.

[Author]

Posts