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

当您使用锚点导航到动画元素时，似乎动画会出现问题。浏览器在移动和动画被破坏时导航到元素。

Css动画无法正常工作

2 个答案: