html - 在CSS中创建幻灯片菜单

Question

我正在创建一个滑动菜单，橙色框转到菜单的一 Angular ，出现带有橙色菜单名称的白色框。

问题是当我使用 :hover 将鼠标移到它上面，它开始，并自动到达起始位置。

如何让它完成动画？

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

我提出了一个仅使用 transition 和 :before 伪元素的解决方案:

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;
}

检查这个 Demo fiddle