Animacje CSS (Menu). Jak otrzymać efekt pauzy po zjechaniu kursorem z div'a

Witam :)

Mam sobie takie o to menu: http://cssdeck.com/labs/qbcso3a4 , które po najechaniu obraca się i zmienia swoją pozycję animation itp. i tu następuje problem, ponieważ po zjechaniu z niego kursorem cofa się na swoje stare miejsce ( nie to z animation). Chciałbym aby po najechaniu (lub kliknięciu) wykonało się 100% animacji i zostało w wyznaczonym miejscu(lub się cofnęło po x sekundach ) po zjechaniu/kliknięciu .

Może ktoś mnie nakierować czego użyć? Jak do tego podejść? I czy da się osiągnąć taki efekt w css+html?

ps. Tak wiem, że nazwy class są słabe, nie czytelne itp :)

Kod:

div.pasek {
    position: fixed;
    height: 70px;
    width: 100%;
    margin-top: -450px;
    margin-top: -11px;
    z-index: 2;
    background-color: #FFFFFF;
    border-bottom: solid 2px #000000;
}

a.pasek_nazwa {
    color: #0099FF;
    margin-left: 40%;
    font-size: 25px;
    z-index: 2;
}


/* Menu */

@keyframes menu_pasek {
    50% {
        border-radius: 100%;
    }
    99% {
        border-radius: 100%;
        margin-left: 100%;
        transform: rotate(360deg);
        animation-play-state: paused;
    }
}

div.obracanko_menu {
    width: 100%;
    display: tabel;
    overflow: hidden;
}

div.obracanko_menu:hover {
    animation: menu_pasek 2s;
    animation-fill-mode: forwards;
    width: 100%;
}

div.menu_pasek {
    display: table;
    width: auto;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    background-color: #BBB;
    background-size: 100% 100%;
    width: 70px;
    height: 50px
}

#mainmenu, #mainmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainmenu ul {
    width: 260px;
}

#mainmenu ul li {
    clear: both;
}

#mainmenu>li {
    float: left;
    margin-right: 10px;
    position: relative;
}

#mainmenu>li li {
    position: relative;
}

#mainmenu>li ul {
    position: absolute;
    left: 0;
}

#mainmenu>li ul li ul {
    position: absolute;
    left: 260px;
    top: 0px;
    animation: menuu1 5s;
}


/* Rozwijanie poziom2 */

ul ul {
    display: none;
    animation: menuu2 5s;
}


/* Rozwijane poziom1 */

ul li:hover>ul {
    display: block;
    animation: menuu 5s;
}


/* po najechaniu na menu */


/*POZIOM 1*/

#mainmenu {
    margin-left: 15px;
    margin-top: -15px;
    font-family: calibri;
    tahoma, arial;
}

#mainmenu>li>a {
    ;
}

#mainmenu>li:hover>a {
    background-color: #BBB;
    color: #FFF;
}


/*POZIOMY NIŻSZE*/

#mainmenu ul {
    font-size: 20px;
    border-radius: 3px;
    background: #FFF;
}

#mainmenu ul li>a {
    color: #0099FF;
    display: block;
    padding: 5px;
    border-radius: 3px;
    text-decoration: none;
}

#mainmenu ul li:hover>a {
    color: #eee;
    background-color: #0D61F2;
}


/* po najechaniu na tekst */

.arrow {
    display: inline-block;
    margin: 0 5px 0;
    height: 0;
    vertical-align: top;
    content: "";
    position: absolute;
}


/* strzałki */

#mainmenu>li>a>.arrow {
    top: 17px;
    right: 0;
    margin-right: -8px;
    border-top: 3px solid #333;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
}

ul ul .arrow {
    top: 10px;
    right: 0;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
    border-left: 3px solid #333;
    border-bottom: 3px solid transparent;
}

div.menu {
    position: fixed;
}


/*Koniec menu*/

<!DOCTYPE html>
<html>

<head>
    <title>Strona główna</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>


    <div class="pasek">
        <a class="pasek_nazwa"></a>
        <ul id="mainmenu">

            <li>
                <a href="#">
                    <div class="obracanko_menu">
                        <div class="menu_pasek"></div>
                    </div>
                </a>
                <ul>
                    <li><a href="#">Film wideo</a><i class="arrow"></i></a>
                        <ul>
                            <li><a href="#">Rozdzielczość obrazu wideo</a></li>
                            <li><a href="#">Liczba klatek na sekundę FPS</a></li>
                            <li><a href="#">Przeplot</a></li>
                            <li><a href="#">Przepływowość (bitrate)</a></li>
                            <li><a href="#">Format obrazu wideo</a></li>

                            <li><a href="#">Przetwarzanie strumieniowe</a></li>
                            <li><a href="#">Kompresja wideo</a></li>
                        </ul>
                    </li>

                    <li><a href="#">Koder-dekodery wideo<i class="arrow"></i></a>
                        <ul>
                            <li><a href="#">DivX</a></li>
                            <li><a href="#">Xvid</a></li>
                            <li><a href="#">DV</a></li>
                            <li><a href="#">H.264</a></li>
                        </ul>
                    </li>

                    <li><a href="#">Formaty plików wideo</a><i class="arrow"></i></a>
                        <ul>
                            <li><a href="#">AVI</a></li>
                            <li><a href="#">MPEG</a></li>
                            <li><a href="#">MPEG-1</a></li>
                            <li><a href="#">MPEG-2</a></li>
                            <li><a href="#">MPEG-4</a></li>
                            <li><a href="#">VideoCD</a></li>
                            <li><a href="#">QuickTime</a></li>
                            <li><a href="#">RealMedia</a></li>
                            <li><a href="#">Flash Video</a></li>
                            <li><a href="#">DVD</a></li>
                            <li><a href="#">3GP</a></li>
                            <li><a href="#">Super Video CD</a></li>
                            <li><a href="#">Matroska</a></li>
                        </ul>
                    </li>

                    <li><a href="#">Tworzenie filmu</a><i class="arrow"></i></a>
                        <ul>
                            <li><a href="#">Montaż filmu</a></li>
                            <li><a href="#">Przycinanie</a></li>
                            <li><a href="#">Scenopis</a></li>
                            <li><a href="#">Efekt przejść wideo</a></li>
                        </ul>
                    </li>
                </ul>
            </li>

        </ul>
    </div>


</body>

</html>