[CSS][Fixed]Needing help on animating

[pzfx]

Hi, my name is PzFx. I have no experience in coding at all, so most of my codes are from the tutorials.
I was trying to do is animating the logo in the middle here to slide down like the scoreboard [same animating code from tutorial].
So, I added some lines of code, mostly copied from the scoreboard codes as I want the same function to be applied to the logo.
I added .queue(elemHide('.logo')).delay(1000) and .queue(elemShow('.logo')).delay(1000) in JS page. The ".logo" is the name of logo's class.
But it doesn't work. The logo was hidden as the script commanded but when it come to the sliding part, it does not slide. It just teleported to the specified place. I was playing around with the codes for a moment, trying to see what is the problem but I have no idea what causing it not to be animated. If you guys could help, I will be much thankful

Here's the page codes. [All the package codes are the tutorial codes left untouched]

*edit1: I actually fixed the code. I forgot to pre-positioning the logo, resulting in instant teleport. By using top: 0;, the logo will have a position to slide back and forth

HTML

<div class="logo l1 slow hidden"></div>
<div class="scores s1 color2 slow hidden" id="players_1s">0</div>
<div class="scores s2 color2 slow hidden" id="players_2s">0</div>

<div class="players p1 color1 slow hidden" id="players_1">one</div>
<div class="players p2 color1 slow hidden" id="players_2">two</div>

CSS

.players
{
    position: absolute;
    top: 50;
    width: 300px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
}
.players.p1 { left: 300px; }
.players.p2 { right: 300px; }

.scores
{
    position: absolute;
    top: 50;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;

    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.logo {
    position: absolute;
    width: 102px;
    height: 105px;
    background-image: url('http://data.8wr.io/sba/171/1.png');
    background-size: cover;
    margin: auto;
    z-index: 5;
}
.logo.l1{ left: 46%; }

.scores.s1 { left: 230px; }
.scores.s2 { right: 230px; }

.hidden { top: -110px !important; }

JS

if ($('#players_1').text() != docData['players_1'] ||
    $('#players_2').text() != docData['players_2'] )
{
    $('body')
        .queue(elemHide('.logo')).delay(1000)
        .queue(elemHide('.scores')).delay(1000)
        .queue(elemHide('.players')).delay(1000)
        .queue(elemUpdate()).delay(1000)
        .queue(elemShow('.logo')).delay(1000)
        .queue(elemShow('.players')).delay(1000)
        .queue(elemShow('.scores'));
}
else if ($('#players_1s').text() != docData['players_1s'] ||
    $('#players_2s').text() != docData['players_2s'] )
{
    $('body')
        .queue(elemHide('.scores')).delay(1000)
        .queue(elemUpdate()).delay(1000)
        .queue(elemShow('.scores'));
}

 

[Jaxel]

Glad you figured it out. Absolute positioning in CSS is temperamental when it comes to animations.

 

[darkzero_omega]

wait so how large should the img be when using it?