CSS動畫不正確嗎？

矩形應該向下移動，左邊然後右邊。但由於某種原因，他們只是「跳躍」。有人可以告訴我爲什麼嗎？CSS動畫不正確嗎？

<!DOCTYPE html> 
<html> 
<body> 

    <style> 
    .imgbox 
{ 
position: relative; 
float:left; 
text-align:center; 
width:120px; 
height:130px; 
border:1px solid gray; 
margin:0px; 
margin-bottom:8px; 
padding:0px; 
-webkit-animation-name:drop; 
-webkit-animation-duration:2s; 
-webkit-animation-timing-function:linear; 
-webkit-animation-play-state:running; 
-webkit-animation-fill-mode:forwards; 

animation-name:drop; 
animation-duration:2s; 
animation-timing-function:linear; 
animation-play-state:running; 
animation-fill-mode:forwards; 
} 

@-webkit-keyframes drop 
{ 
0%  {top:10px;} 
100% {top:100px;} 
} 
@keyframes drop 
{ 
0%  {top:10px;} 
100% {top:100px;} 
} 


    </style> 

<div class="imgbox" id="stuff1" style="-webkit-animation-delay:1s; animation-delay:1s"></div> 
<div class="imgbox" id="stuff2" style="-webkit-animation-delay:2s; animation-delay:2s"></div> 

</body> 
</html>

基本上我只想一個矩形接受動畫和旁邊做得一樣好，只是稍微延遲。這僅僅是一個例子，因此會出現很多矩形，爲什麼我不會製作單獨的div。

來源

2014-04-02 SMD01

未經測試，但我看你的代碼，好像你需要設置'頂：10px的;''來作爲.imgbox'以及 –

這就是它！謝謝！ – SMD01

嗯，這就是HTML中的事情 - 所有東西都是以像素爲單位的，所以當你移動某個東西時，你只能移動X個像素，或者不移動它。

您正在將矩形移動90個像素，持續時間爲2秒，沒有辦法讓它更平滑。但是，如果您擔心這種初始跳躍，那是因爲您的元素的值爲零，當動畫開始時它會立即增加到10個像素，然後動畫繼續。要避免它，只需將其top屬性設置爲10px。

見這裏：http://jsfiddle.net/adePY/

來源

2014-04-02 04:34:49 Shomz

好吧，你後來加入了......但在此之前，對我沒有意義:) –

@ Mr.Alien啊，對不起，以爲你看到了整件事情。我不確定OP需要修復的兩個問題中的哪一個，因此解釋了兩者。 :) – Shomz

太棒了:)，.. –

CSS動畫不正確嗎？

回答

相關問題