animation - CSS:是否可以使用 CSS 来放大动画元素？

Question

检查this jsFiddle 。现在CSS动画几乎已经全面展开，我想在CSS中做这样的事情:当鼠标移到一个元素(.box)上时，它会被动画放大，它的中心保持不变在同一个地方，所有其他元素都保持在原来的位置。

如果我知道元素的宽度，我想我可以为每个元素使用一个包装元素，并使用元素的相对定位(.box)并为其宽度、高度、左侧设置动画和顶部。但这个例子有元素变量。

如果不可能，对于这种效果还有其他建议吗？

Answer 1

是的，您可以使用 CSS3 过渡。

.box {
    -webkit-transition:  -webkit-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    -ms-transition: -ms-transform .2s ease-out; 
    transition: transform .2s ease-out; 
}
.box:hover {
   -webkit-transform:scale(2);
   -moz-transform:scale(2);
   -o-transform:scale(2);
   transform:scale(2);
}

参见 fidd.e: http://jsfiddle.net/TheNix/uzgha/6/