因此,我有一个两端呈圆形的菜单,并由对 Angular 线空格描绘(通过 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;
}
感谢您的知识!
最佳答案
这是一个奇怪的错误,因为我大约 99% 确定 CSS 动画应该是异步的。我也可以通过在 ul
上包含一个 skewX(0)
属性来伪造它。
.testmenu ul{
-webkit-transform: skewX(0);
关于html - css 转换和动画冲突; html元素的顺序很重要吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27804130/