Css动画无法正常工作答案

【问题标题】：Css Animation not working correctCss动画无法正常工作
【发布时间】：2013-05-31 17:59:24
【问题描述】：

我必须对元素进行动画单独。元素一应该播放动画一，元素二应该播放动画二。
但是当我测试它时，元素一播放动画而元素二不播放。
如果我延迟开始元素二的动画，这不会发生，但这不是解决方案...
这是元素一：

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

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

【问题讨论】：

如果你能设置一个小提琴jsfiddle.net 会很有帮助

标签： css css-animations

【解决方案1】：

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

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

应该是-webkit-animation。

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

【讨论】：

【解决方案2】：

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

【讨论】：