CODEWITHSUNDEEP
htmlcss
user2654319
user2654319

Reputation: 93

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

Upvotes: 4

Views: 205

Answers (2)

kei
kei

Reputation: 20471

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

DEMO

Update

If you move your mouse anywhere on the object it will jerk back and forth over and over. – Josh Powell

This can be fixed by adding a wrapper div for .smmo and animating .smmo on hover to it

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

DEMO

Upvotes: 1

DaniP
DaniP

Reputation: 38252

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

Upvotes: 2

Related Questions