CODEWITHSUNDEEP
csscss-animations
Max Meuten
Max Meuten

Reputation: 160

Css Animation not working correct

I have to elements and I want to animate them seperatly. Element one should play animation one and element two should play animation two.
But when I test it element one plays both animations and element two none.
This is not happening if I start the animation of element two with a delay, but this is no solution...

Here's element one:

#wrapper_splashscreen #logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    -webkit-animation: logoIntro 0.5s 1; }
@-webkit-keyframes logoIntro
{
    0% {
        -webkit-transform: scale(0, 0);
        opacity: 0;
    }
    80% {
        -webkit-transform: scale(1.4, 1.4);
    }
    90% {
        -webkit-transform: scale(1.1, 1.1);
    }
    100% {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
}

and here's element two:

   #wrapper_splashscreen #menu {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 40px;
        background: #151515;
        -webkit-animation-name: menuIntro 1s 1; }
    @-webkit-keyframes menuIntro
    {
        0%, 30% {
            bottom: -40px;
        }
        100% {
            bottom: 0px;
        }
    }

The logo (element one) is fadeing in and moving down and the menu (element two) is doing nothing.

Upvotes: 0

Views: 201

Answers (2)

Giona
Giona

Reputation: 21114

In the second element you've an error:

-webkit-animation-name: menuIntro 1s 1;

It should be -webkit-animation.

I'm not sure what's the problem with the first element (please add a fiddle/demo), buy maybe setting a transform-origin will help

Upvotes: 2

Max Meuten
Max Meuten

Reputation: 160

It seems like the animation becomes buggy when you navigate to the animated element with an anchor. The browser navigates to the element while its moving and the animation gets broken.

Upvotes: 0

Related Questions