css变换和动画冲突； html元素的顺序很重要？

Question

所以，我有一个末端圆润的菜单，并由对角线空格划定（通过 css transform skewx 完成）。我还有一个使用 css 动画制作的元素。

问题是这样的：如果动画元素被放置在 DOM 中的菜单之前。菜单变形，直到动画完成。如果我将动画元素放在 DOM 中的菜单之后，它可以正常工作。

我想将动画元素保留在 DOM 的顶部。如何用 css 解决这个问题？

JSFiddle

标记：

<div class="testanimation"></div>

<div class="testmenu">
    <ul>
        <li class="one"><span><p>ONE</p></span></li>
        <li class="two"><span><p>TWO</p></span></li>
        <li class="three"><span><p>THREE</p></span></li>
        <li class="four"><span><p>FOUR</p></span></li>
    </ul>
</div>

这是CSS：

@-webkit-keyframes cart-modified{
    0% {
        -webkit-transform: scale(1);
    }
    35% {
        -webkit-transform: scale(1.5);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
.testanimation{
    -webkit-animation: cart-modified 0.5s ease 2 0.25s;
    min-width: 1.25em;
    padding: 0.25em;
    position: absolute;
    top: 3px;
    background-color: #fa001f;
    background-color: rgba(250, 0, 31, 0.9);

}

.testmenu ul{
    display: flex;
    display: -webkit-box;
    border-radius: 50px;
    overflow: hidden;
    width: 95%;
}
.testmenu ul li{
    transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    margin: 0 5px 0 5px;
    background-color: #e8e8e8;
    width: 25%;
    text-align: center;
    list-style: none;
}
.testmenu span{
    transform: skewX(45deg);
    -webkit-transform: skewX(45deg);
    display: block;
    color: white;
}
.one{
    padding-left: 40px !important;
    margin-left: -60px !important;
}
.four{
    padding-right: 40px !important;
    margin-right: -30px !important;
}

感谢您的知识！

Answer 1

这是一个奇怪的错误，因为我大约 99% 确定 CSS 动画应该是异步的。我也可以通过在ul 上包含skewX(0) 属性来伪造它。

.testmenu ul{
    -webkit-transform: skewX(0);

查看：http://jsfiddle.net/9Lgq205d/