在css中创建幻灯片菜单

问题描述：

我正在创建幻灯片菜单，橙色框转到菜单的角落，并出现橙色菜单名称的白色框。在css中创建幻灯片菜单

的问题是，当我使用：悬停 和移动鼠标的是，它启动，并自动在开始正进入。

如何让它完成它的动画？

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

没有太大的必要，以弥补这方面一个关键帧，你可以有型有款的儿子悬停的正常变化实现这一点。 –

答

固定我想出了一个解决方案仅使用transition和:before伪-element这样：

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

+1是最干净的解决方案。 –

答

添加 -webkit-animation-fill-mode:forwards;

DEMO

更新

如果将鼠标移动到物体上的任何位置，它会一遍又一遍地来回跳动。 - 约什 - 鲍威尔

这可以通过添加一个包装DIV为.smmo和悬停动画.smmo它

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

DEMO

如果您将鼠标移动到物体上的任何位置，它会一遍又一遍地来回跳动。 –

在css中创建幻灯片菜单

相关推荐