Creating a slide menu in css

Question

I create a slide menu, the orange frame goes into the corner of the menu, a white box appears with an orange menu name.

The problem is that I use : hover and hover over it, it will start and automatically go to the beginning of pos.

How to finish the animation?

http://jsfiddle.net/JudgeDredd/XWmme/1/

    .smmo
    {
    width:195px;
    height:45px;
    background:#FF3300;
    position:relative;
    display:block;

    }


    .smmo:hover {

-webkit-animation-name:slideL ;
-webkit-animation-duration:1s;
 }
@-webkit-keyframes slideL /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;width:65px;}
} 

Answer 1

I came up with a solution using only transitionand :beforepseudo follows:

HTML

<div class="smmo">Your Title</div>

CSS

.smmo {
    position:relative;
    color:orange;
    text-align:center;
    width:195px;
    height:45px;
    line-height:45px;
}
.smmo:before
{
    content:" ";
    width:100%;
    height:100%;
    background:#FF3300;
    position:relative;
    display:block;
    position:absolute;
    top:0;
    left:0;
    transition:all 1s;
}
.smmo:hover:before {
    left:200px;
    width:65px;
}

Check this demo script

Answer 2

Add -webkit-animation-fill-mode:forwards;

Demo

---

Update

, . -

, div .smmo .smmo

.smmo-wrapper:hover .smmo {
    -webkit-animation-name:slideL;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;
}

DEMO