Anushka Anushka - 5 months ago 10
CSS Question

Make smooth transform rotate on hover

After hover the cursor on one menu item , if you move the cursor slightly before the transform get complete , the transform will start again. it will happen again and again when you shake you move little bit on the menu item .
How can I overcome this issue?

<ul id="menu-1">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
</ul>

ul#menu-1 {
list-style: none;
margin-left: 0;
width:100%
}
ul#menu-1 li{
background: #000;
display: inline-block;
margin-bottom: 0.25em;
min-width: 15.87%;
animation: elmtoFront 1.2s linear normal forwards;
}

ul#menu-1 li a {
display:block;
color: #fff;
padding: 0.5em 1.5em;
text-decoration:none;
}
ul#menu-1 li a:hover{
transition: 1.2s ease-in-out;
transform-style: preserve-3d;
transform: rotateY(-360deg);
animation:elmtoBack 1.2s linear normal forwards;
}
@keyframes elmtoBack {
0% {z-index:0;}
100% {z-index:1;}
}
@keyframes elmtoFront {
0% {z-index:1;}
100% {z-index:0;}
}


FYI : https://jsfiddle.net/anushkakrajasingha/bpp48a15/6/

zan zan
Answer

Change this

ul#menu-1 li a:hover{

to this

ul#menu-1 li:hover a{

Fiddle