Disabling :hover during Css animation [closed]

Question

so I have got a sidebar nav that when the page loads, it slides out of the screen, and then when the user hovers over the area, the nav slides back on screen. However, when the nav slides off, if the user hovers over the nav during the slide off animation, the nav starts to flicker in and out as it tries to do both animations. I am wondering if there is a way to prevent this and/or disable the :hover during the slide out animation?

Sidebar asp.net

<div class="col-sm-3 col-md-2 sidebar slider"> 
     <h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
     <asp:CheckBoxList runat="server" ID="releaseStatusFilter" AutoPostBack="true" RepeatDirection="Horizontal" CellPadding="6" Height="5" style="margin-left:-10px">
     <asp:ListItem Text="Future" Value ="Future" Selected="true"></asp:ListItem>
     <asp:ListItem Text="Current" Value ="Current" Selected="true"></asp:ListItem>
     <asp:ListItem Text="Completed" Value ="Completed" Selected="false"></asp:ListItem></asp:CheckBoxList>
     <script type="text/javascript"></script>
     <asp:ListView runat="server" ID="releaseList" style="float:left;">
         <ItemTemplate>
             <ul class="nav navbar nav-sidebar goo-collapsible" >
                 <li><a href='<%# "Release.aspx?rn="+ Eval("releaseNumber") %>'><%# Eval("releaseNumber") + " " + Eval("releaseShortName") %></a></li>
             </ul>
             <script type="text/javascript">
                 var param = location.search.split('rn=')[1]
                 param = param.split('%20').join(' ')
                 $('ul').find('a[href="Release.aspx?rn=' + param + '"]').parents('li').addClass('active');
             </script>
        </ItemTemplate>
    </asp:ListView>
</div>

css

.sidebar {
    display: none;
}

@media (min-width: 768px) {
    .sidebar {
        font-size: 12px;
        position: fixed;
        top: 120px;
        width: 175px;
        bottom: 0;
        left: 0px;
        display: block;
        padding: 10px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #ccc;
        border-right: 1px solid #eeeeee;
        -webkit-animation: bannermoveout 0.5s linear both;
        animation: bannermoveout 0.5s linear both;
    }
}

@keyframes bannermoveout {
    0% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translate3d(-92px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translate3d(-185px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes bannermoveout {
    0% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translate3d(-92px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translate3d(-185px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }
}

.sidebar:hover {
    -webkit-animation: bannermove 0.5s linear both;
    animation: bannermove 0.5s linear both;
}

@keyframes bannermove {
    0% {
        transform: translate3d(-185px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translate3d(-92px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes bannermove {
    0% {
        transform: translate3d(-185px, 0px, 0px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translate3d(-92px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: ease-in-out;
    }
}

So i managed to fix it by using jquery to animate the sidebar menu instead of css. Thanks everyone for you help!

Jquery:

$(document).ready(function () {
            $(".slider").animate({
                left: '-185px'
            }, "fast")
            $("#slidebody").animate({
                left: '0px'
            }, "fast")
            .queue(function () {
                $(".slider").hover(function () {
                    $(".slider").stop().animate({ left: '0px' });
                    $("#slidebody").stop().animate({ left: "60px" });
                    $(this).dequeue();
                }, function() {
                    $(".slider").stop().animate({ left: '-185px' });
                    $("#slidebody").stop().animate({ left: "0px" });
                });
            });
        });

**The slidebody tag was just so that i can shift the container so that the nav didnt overlap the container. **

Answer 1

Maybe by using the .stop() function. Check this out : http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup