Question

我正在创建一个幻灯片菜单，橙色框位于菜单的一角，并出现带有橙色菜单名称的白色框。

问题在于我使用 ：悬停 并将鼠标移动到该位置，它会启动，并自动进入开始位置。

如何让它完成动画？

    .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

Answer 2

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

DEMO

<强>更新

如果将鼠标移动到物体上的任何位置，它会反复来回晃动。 - 约什鲍威尔

这可以通过为.smmo添加包装div并在悬停到它时设置动画.smmo来修复

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

DEMO

在css中创建幻灯片菜单

2 个答案: