Shake nie dziala

wersja skryptu MyBB: 1.8
adres forum: http://skill4fun.pl/index.php
na czym polega problem (screen, opis, komunikaty):


Chcialem miec efekt Shake https://webboard.pl/thread-59784.html na 3 elementy w tabeli [gt, steam, htlt] wszystko zrobilem jak w tym poradniu ale nie dziala.

@-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
}

to dodalem do global.css

Bo ten kod CSS odpowiada, żeby działało poprawnie na Operze, Safari i Chrome, więc na firefoxie nie zadziała. Na IE w wersji mniejszej niż 10 też nie będzie działało.

Zamień swój CSS na to

@keyframes spaceboots {
   0% { transform: translate(2px, 1px) rotate(0deg); }
   10% { transform: translate(-1px, -2px) rotate(-1deg); }
   20% { transform: translate(-3px, 0px) rotate(1deg); }
   30% { transform: translate(0px, 2px) rotate(0deg); }
   40% { transform: translate(1px, -1px) rotate(1deg); }
   50% { transform: translate(-1px, 2px) rotate(-1deg); }
   60% { transform: translate(-3px, 1px) rotate(0deg); }
   70% { transform: translate(2px, 1px) rotate(-1deg); }
   80% { transform: translate(-1px, -1px) rotate(1deg); }
   90% { transform: translate(2px, 2px) rotate(0deg); }
   100% { transform: translate(1px, -2px) rotate(-1deg); }
}
//zapis dla Chrome, Opera, Safari
@-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;

   animation-name: spaceboots;
   animation-duration: 0.8s;
   transform-origin:50% 50%;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}
.shake {
   display:inline-block
}