Shaking Logo Effect on Hover

Oxygen · 05-04-2015, 04:45 PM

add the following code in your EXTRA.css

Code:
@-webkit-keyframes spaceboots {
 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
 }
 .shake:hover,
 .shake:focus {
 -webkit-animation-name: spaceboots;
 -webkit-animation-duration: 0.8s;
 -webkit-transform-origin:50% 50%;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 }
 .shake {
 display:inline-block
 }

Content locked

This content has been locked. Please login or register in order to unlock it.

Code:
<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />

Content locked

This content has been locked. Please login or register in order to unlock it.

Code:
<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" class="shake" />

Shaking Logo Effect on Hover

Submitted by Oxygen, 05-04-2015, 04:45 PM, Thread ID: 2511