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 动画应该是异步的。我也可以通过在 ul 上包含 skewX(0) 属性来伪造它。

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

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

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

css transform and animation conflicting; order of html elements matters?

html

css

animation

transform

JSFiddle