爲什麼這個動畫完成波濤洶涌？

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; 

}