CSS3強制連續動畫

Question

我想創建一個脈衝動畫，但是，這些步驟一次全部運行而不是按順序運行。

我想要的是我的箱子去中心，脈衝，然後返回到開始。現在發生的事情是，它進入中心，但同時增長，然後在返回時返回脈衝。

下面是代碼：

input[type="checkbox"]:checked + #test{ 
-webkit-animation:pulse 5s; 
} 

#test{ 
width:50px; 
height:50px; 
border:1px solid black; 
position:relative; 
} 



@-webkit-keyframes pulse{ 

33%{ 
    left:100px; 
    top:100px; 
} 

66%{ 
    width:100px; 
    height:100px;  
} 

73%{ 
    width:50px; 
    height:50px; 
} 

83%{ 
    width:100px; 
    height:100px; 
} 

100%{ 
    left:0px; 
    top:0px; 
} 

}

http://jsfiddle.net/cMXBf/

Answer 1

必須明確規定一個屬性必須保持不變，其間的步驟，如果你想它這樣做..動畫如果您只在一個步驟中指定寬度和高度，則左側和頂部將立即開始動畫到下一個適用於它們的停止點，而忽略第一個在不

藉此例如：

33%{ 
    left:100px; 
    top:100px; 
    width: 50px; 
    height: 50px; 
} 

66%{ 
    left: 100px; 
    top: 100px; 
    width:100px; 
    height:100px;  
} 

73%{ 
    left: 100px; 
    top: 100px; 
    width:50px; 
    height:50px; 
} 

83%{ 
    left: 100px; 
    top: 100px; 
    width:100px; 
    height:100px; 
} 

100%{ 
    width: 50px; 
    height: 50px; 
    left:0px; 
    top:0px; 
} 

因爲在66％I指定相同的左邊和頂部正如我在33％的人，他們不知道改變都在這兩個站之間。

我不確定這是不是動畫，如果你想要發生，但你應該能夠從這個想法，否則，如果你有麻煩，讓我知道。