CODEWITHSUNDEEP
htmlcssanimation
eddyrolo
eddyrolo

Reputation: 347

Why does this animation finish choppy?

Trying to do a fairly simple list animation that grows when you mouseover.

http://jsfiddle.net/cvpehzb7/

The animation finishes choppily and goes out way too far.

Maybe my padding is the problem.
I tried using width, but I got similar results.

Any help would be appreciated. 

<div id = "user-task-bar">

                <ol class="task-list">

                    <li> <span> My Products </span> </li>
                    <li> My Profile </li>
                    <li> Get Support </li>


                </ol>
            </div>

#user-task-bar {

position: absolute;

left:30px;
width:240px;

}

#user-task-bar ol.task-list  {

padding: 0px;
margin: 0px;
width:100%;
list-style:none;

}


#user-task-bar .task-list li {
width:100%; 
padding: 0px;
font-size: 14px;

border-top: 1px solid #000; 
border-bottom: 1px solid #000; 
border-right: 2px solid #000;

border-left: 2px solid #000;

text-align:center;
 padding: 15% 0px;
 background: #f2f3f2;
}

#user-task-bar .task-list li:hover {

 -webkit-animation: grow-right 300ms;
 animation: grow-right 300ms; 
 animation-timing-function: ease-out;

 padding: 15% 8%;
 cursor:pointer;
 background: #fff;

}

@-webkit-keyframes grow-right {

    0% { padding: 15% 0; }
    100% { padding: 15% 3px; }
}

@keyframes grow-right{

    0% { padding: 15% 0; }
    100% { padding: 15% 3px; }
}

#user-task-bar .task-list li :last {
border:  0px;
}

#user-task-bar .task-list li  span{ 

   vertical-align: middle;
}

Upvotes: 1

Views: 117

Answers (4)

QArea
QArea

Reputation: 4981

Yes, the problem is in padding. You need to use smaller one.

#user-task-bar .task-list li:hover {
 -webkit-animation: grow-right 300ms;
 animation: grow-right 300ms; 
 animation-timing-function: ease-out;
  padding: 15% 2%;
 cursor:pointer;
 background: #fff;

}

Upvotes: 0

Ga&#235;l Barbin
Ga&#235;l Barbin

Reputation: 3919

When the animation is done, the original value of your padding is re-applied.

You can use animation-fill-mode: forwards, to keep the properties of the last keyframe. See https://developer.mozilla.org/fr/docs/Web/CSS/animation-fill-mode

But a simpler way, and wide supported, is to set the value of the properties in the last keyframe equal to the default values.

Examples:

Upvotes: 2

user3718908x100
user3718908x100

Reputation: 8509

You can try this:

HTML

<div id = "user-task-bar">
    <ol class="task-list">
        <li> <span> My Products </span> </li>
        <li> My Profile </li>
        <li> Get Support </li>
    </ol>
</div>

CSS

#user-task-bar {

position: absolute;


left:30px;
width:240px;


}

#user-task-bar ol.task-list  {

    padding: 0px;
    margin: 0px;
    width:100%;
    list-style:none;

}

#user-task-bar .task-list li {
    width:100%; 
    padding: 0px;
    font-size: 14px;

    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
    border-right: 2px solid #000;

    border-left: 2px solid #000;

    text-align:center;
    padding: 15% 0px;
    background: #f2f3f2;
}

#user-task-bar .task-list li:hover {
    -webkit-transition: padding 1s ease-in-out;
    -moz-transition: padding 1s ease-in-out;
    -ms-transition: padding 1s ease-in-out;
    -o-transition: padding 1s ease-in-out;
    transition: padding 1s ease-out;
    padding: 15% 8%;
    cursor:pointer;
    background: #fff;
}

Tried it and it works smoothly.

Upvotes: 0

frhd
frhd

Reputation: 10244

If you're using keyframes with a final state, the desired attributes should also be set correctly.

In this section, padding on hover should also give those 3px:

#user-task-bar .task-list li:hover {

  -webkit-animation: grow-right 300ms;
  animation: grow-right 300ms; 
  animation-timing-function: ease-out;

  padding: 15% 3px;
            // ^^^
  cursor:pointer;
  background: #fff;
}

jsfiddle

Then you'll need the reverse animation, too.

What about using css transitions in this case instead?

Upvotes: 1

Related Questions