Hey there! I'm facing an interesting challenge with my menu design. The menu has rounded ends and diagonal spaces created using CSS transform skewx. Additionally, I have an animated element on the page.
The issue arises when the animated element is placed before the menu in the DOM - it causes the menu to deform until the animation completes. However, placing the animated element after the menu in the DOM solves this problem.
I really want to keep the animated element at the top of the DOM. Any suggestions on how I can tackle this issue using CSS?
Check out JSFiddle demo
Here's the markup:
<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>
And here's the relevant CSS code:
@-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;
}
Thanks for sharing your expertise!