活动时css3动画锚

Question

我有一组缩略图，我想在点击（活动）时缩小。我认为减少它们的大小（.2ems）并增加它们周围的边距（.1em四周）会做到这一点，但不知怎的，我仍然从他们的姐妹那里得到一堆运动。

这里有一个jsfiddle来演示 http://jsfiddle.net/danielredwood/EWCAJ/1/

我想避免使用基于webkit的动画：）

谢谢！

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