Anushka Anushka - 1 year ago 126
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#menu-1 {
list-style: none;
margin-left: 0;
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 {
color: #fff;
padding: 0.5em 1.5em;
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;}


zan zan
Answer Source

Change this

ul#menu-1 li a:hover{

to this

ul#menu-1 li:hover a{


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download