为什么这个动画完成波涛汹涌？

Question

试图做一个相当简单的列表动画，当你mouseover时增长。

http://jsfiddle.net/cvpehzb7/

动画choppily完成出入路太远。

也许我的填充是问题。
我尝试使用宽度，但我得到了类似的结果。

任何帮助，将不胜感激。

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

Answer 1

当动画完成时，您的填充的原始值将被重新应用。

您可以使用animation-fill-mode: forwards来保留最后一个关键帧的属性。请参阅https://developer.mozilla.org/fr/docs/Web/CSS/animation-fill-mode

但是，更简单的方法并且得到广泛支持的是，将最后一个关键帧中的属性值设置为默认值。

实例：

• 动画填充模式：http://jsfiddle.net/cvpehzb7/5/

• 与填充在最后一个关键帧和在悬停规则相同的值：http://jsfiddle.net/cvpehzb7/3/

• 与CSS过渡： http://jsfiddle.net/cvpehzb7/10/

Answer 2

如果您使用的是keyframes与最终状态，所需的属性也应正确设置。

在本节中，悬停填充也应该给那些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

然后你需要的反向动画，太。

在这种情况下如何使用css transitions呢？

Answer 3

你可以试试这个：

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

试了一下，它工作的顺利进行。

Answer 4

是的，问题在于填充。你需要使用较小的一个。

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

}