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

Question

所以，我有一个在末端四舍五入的菜单，并用对角线空格描绘（用css变换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动画应该是异步的。我也可以通过在skewX(0)上添加ul属性来伪造它。

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

检查出来：http://jsfiddle.net/9Lgq205d/