css3活動時的動畫錨定

Question

我有一組縮略圖，當點擊（活動）時，我想縮小。我認爲減小它們的尺寸（0.2ems）並增加它們周圍的邊距（即所有的周圍）會做到這一點，但不知何故，我仍然從他們的姐妹那裏得到一堆動作。

這裏展示 http://jsfiddle.net/danielredwood/EWCAJ/1/

我很想避免基於WebKit的動畫:)

感謝的jsfiddle！

Answer 1

如何using a transform，則該元素佔用的空間也不會受到任何影響：

.thumbnail { 
    background:#ccc; 
    width:18.75em; 
    height:11.25em; 
    margin:1.25em 0 0 1.25em; 
    float:left; 
    -moz-transition-duration: 0.2s; 
    -webkit-transition-duration: 0.2s; 
    -ms-transition-duration: 0.2s; 
    -o-transition-duration: 0.2s; 
    transition-duration: 0.2s; 
} 
.thumbnail:active { 
    -moz-transform: scale(0.98); 
    -webkit-transform: scale(0.98); 
    -ms-transform: scale(0.98); 
    -o-transform: scale(0.95); 
    transform: scale(0.98); 
}