Błąd Shake logo

wersja skryptu MyBB: 1.6
adres forum: furry.hol.es
na czym polega problem : Efekt Shake logo
Witam. Potrzebuję pomocy. Postępując zgodnie z poradnikiem : https://webboard.pl/wiki.php?efekt-shake-w-logo.html
Jednak mój wpis w header wygląda nieco inaczej :

<div id="container">
        <a name="top" id="top"></a>
        <div id="se">
<form class="searchform" method="post" action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" class="textbox" name="keywords"  value="Search Forum" onblur="this.value = this.value || this.defaultValue;" onfocus="this.value == this.defaultValue &amp;&amp; (this.value = '');"/>
<input type="image" src="{$theme['imgdir']}/search-b.png" class="searchsubmit" value="Search" />
<a href="http://feeds.feedburner.com/finalsense/RSS" target="_blank"> <img src="{$theme['imgdir']}/feed.png" title="Feed" /></a>
<a href="http://www.twitter.com/"> <img src="{$theme['imgdir']}/twitter.png" title="twitter" /></a>
<a href="http://www.facebook.com/"> <img src="{$theme['imgdir']}/facebook.png" title="facebook" /></a>
<span class='custom_theme'><input type='text' id='colorpicker' /></span>
<a href="{$mybb->settings['bburl']}/index.php"> <img src="{$theme['imgdir']}/home-icon.png" title="Home" /></a>
</form>
</div>

        <div id="header">
            <div id="logo">
                <div class="wrapper">
                    <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']} " alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
                </div>
            </div>
            <div id="panel">
                <div class="upper"><!-- This div(class="upper") is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->
                    <div class="wrapper">
                        <ul class="menu top_links">
                            <li><a href="{$mybb->settings['bburl']}/search.php" class="search">{$lang->toplinks_search}</a></li>
                            <li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist">{$lang->toplinks_memberlist}</a></li>
                            <li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar">{$lang->toplinks_calendar}</a></li>
                        </ul>
                            {$welcomeblock}
            </div>
        </div>

moje pytanie brzmi mianowicie: w którym dokładnie miejscu muszę wkleić

class="shake"

aby to zadziałało ?
Dodam, że przy takim wklejeniu nadal nie działa :

<div id="header">
            <div id="logo">
                <div class="wrapper">
                    <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']} " class="shake" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
                </div>

<div id="container">
        <a name="top" id="top"></a>
        <div id="se">
<form class="searchform" method="post" action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" class="textbox" name="keywords"  value="Search Forum" onblur="this.value = this.value || this.defaultValue;" onfocus="this.value == this.defaultValue &amp;&amp; (this.value = '');"/>
<input type="image" src="{$theme['imgdir']}/search-b.png" class="searchsubmit" value="Search" />
<a href="http://feeds.feedburner.com/finalsense/RSS" target="_blank"> <img src="{$theme['imgdir']}/feed.png" title="Feed" /></a>
<a href="http://www.twitter.com/"> <img src="{$theme['imgdir']}/twitter.png" title="twitter" /></a>
<a href="http://www.facebook.com/"> <img src="{$theme['imgdir']}/facebook.png" title="facebook" /></a>
<span class='custom_theme'><input type='text' id='colorpicker' /></span>
<a href="{$mybb->settings['bburl']}/index.php"> <img src="{$theme['imgdir']}/home-icon.png" title="Home" /></a>
</form>
</div>

        <div id="header">
            <div id="logo">
                <div class="wrapper">
                    <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']} " alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" class="shake" /></a>
                </div>
            </div>
            <div id="panel">
                <div class="upper"><!-- This div(class="upper") is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->
                    <div class="wrapper">
                        <ul class="menu top_links">
                            <li><a href="{$mybb->settings['bburl']}/search.php" class="search">{$lang->toplinks_search}</a></li>
                            <li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist">{$lang->toplinks_memberlist}</a></li>
                            <li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar">{$lang->toplinks_calendar}</a></li>
                        </ul>
                            {$welcomeblock}
            </div>
        </div>

i do global.css:

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

Działać na pewno będzie.

Ok. zmieniłem styl na klasyczny MyBB 1.8
Forum : furry.pe.hu
Wszystko wkleiłem w identycznych miejscach jak w poradniku i dalej nie działa.
Ta poprzednim stylu efekt shake działał ale tylko przez google chrome bo mozilla chyba miała Focha
Zawartość Global.css

bla bla bla. Każdy wie co tu powinno być
a końcówka kodu wygląda tak :
/** Impromptu End */

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

podczas gdy header

    <div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div id="logo">
                <div class="wrapper">
                    <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" class="shake" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
                    <ul class="menu top_links">
                        {$menu_portal}
                        {$menu_search}
                        {$menu_memberlist}
                        {$menu_calendar}
                        <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
                    </ul>
                </div>
            </div>
            <div id="panel">
                <div class="upper">
                    <div class="wrapper">
                        <span class='custom_theme'><input type='text' id='colorpicker' /></span>
                        {$quicksearch}
                        {$welcomeblock}
                    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
                <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
            </div>
        </div>
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$unreadreports}
                {$pending_joinrequests}
                {$awaitingusers}
                <navigation>
                <br />

No i nie będzie działać na Mozilli, skoro używasz atrybutów typowo webkitowych.
Zamień wszystkie -webkit-transform na transform.

Chyba raczej na -moz- , bo -webkit- odpowiada przeglądarkom takim jak Chrome czy Safari.

Poza tym, teraz najnowsze przeglądarki nie potrzebują już przedrostka.

A jeśli chciałbym uzyskać ten efekt na każdej z przeglądarek to wystarczy ze zostawię samo transform czy muszę dodać i webkit i jeszcze dorzucić później moz ?

Aktualnie przeglądarki obsługują normalne atrybuty css, więc powinno się unikać takich zabiegów, jak atrybuty z przedrostkami -webkit -moz itp. Ale jeśli chcesz mieć pewność, że będzie działać na kilku starszych wersjach z połowiczną obsługą css3, możesz ich używać, jednak wg. Konsorcjum WWW tego typu kod jest błędny.