Q:

Creating slide menu in css

I'm creating an slide menu, the orange box goes to the corner of the menu, and white box with orange menu name appears.
The issue is when i use :hover
and move mouse over that, it starts, and automatically goes at the start pos.
How to make it finish it's 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;}
} 

A:

I came with a solution using just transition and :before pseudo-element this way:
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 fiddle

