css - Css动画无法正常工作

Question

我必须元素，我想单独为它们设置动画。元素一应该播放​​动画一，元素二应该播放动画二。 但是当我测试它时，元素一播放动画而元素二不播放。如果我延迟启动元素二的动画，则不会发生这种情况，但这不是解决方案...... 这是元素一：

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

标志（元素一）淡入并向下移动，菜单（元素二）什么也不做。

Answer 1

在第二个元素中，您有一个错误：

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

应该是-webkit-animation。

我不确定第一个元素有什么问题（请添加小提琴/演示），购买也许设置一个transform-origin会有所帮助

Answer 2

当您使用锚导航到动画元素时，动画似乎变得有问题。浏览器在元素移动时导航到元素，动画被破坏。