Css 动画无法正常工作

Question

我需要元素，我想动画它们seperatly。元素一应该播放​​动画一，元素二应该播放动画二。
但是当我测试它时，元素一同时播放动画，而元素二则不播放。
如果我延迟启动元素二的动画，则不会发生这种情况，但这不是解决方案...

这是要素一:

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

这是第二个元素:

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

Logo (元素一)淡入并向下移动，菜单(元素二)什么也不做。

Answer 1

在第二个元素中你有一个错误:

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

应该是-webkit-animation。

我不确定第一个元素有什么问题(请添加 fiddle /演示)，购买或设置 transform-origin会有帮助