Animation CSS：可以用动画放大CSS中的元素吗？

检查。现在CSS动画几乎是如火如荼，我想在CSS中做一些类似的事情：当鼠标经过一个元素（

.box

）时，它会被一个动画放大，它的中心保持在原来的位置，所有其他元素都保持在原来的位置

如果我知道元素的宽度，我想我可以为每个元素使用一个包装器元素，并对元素使用相对定位（

.box

）并对其宽度、高度、左侧和顶部设置动画。但是这个例子中的元素是可变的

---

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

是的，使用变换和转换。这里有一个更新提琴：

---

您还可以按比例缩小，如：

是的，您可以使用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:

我的答案不是一个完整的答案（因此我没有将其标记为已接受），并且还有一个缺点：文本在动画制作时似乎会移动，但这是我的JSFIDLE，没有模糊，但不幸的是使用了固定宽度的框（我知道我没有要求这个：），也许有人可以改进我的答案）

---

你觉得工作怎么样？它可以缩放，但可能没问题。来源于。请查看我对thirtydot答案的评论。我的答案很仓促，后来有更好的答案发布，所以没有必要保留我的答案。随处可见的评论是：“这很好，但不幸的是，它只能在非常快的转换中使用。检查这个jsfiddle（），看看在动画完成之前文本是如何模糊的。这就像我对元素进行了缩放，所以内容不清晰：（”对于thirtydot的答案，我有相同的评论。是的，浏览器实际上是在放大元素，所以模糊是一个非常严重的副作用（看起来Chrome会在缩放完成后重新渲染文本，以防出错）。对此，您可以做的不多，从现在开始，浏览器需要更好地处理缩放文本。

scale（）

绝对是您在这种情况下想要使用的。@duality\uu编辑了我的答案，以进行“缩放”fiddle。相同的概念，但现在原始的比例将是后期动画：我对thirtydot的答案有相同的评论。我看到了问题，但仅在Webkit中。在Opera和Firefox中，它看起来像是纯粹的惊人。；）这一定是由于Webkit中的文本呈现。我不确定你会如何解决这个问题。在较长的动画中，文本仍然会左右移动（请参见此处：），但我想我可以接受。我将把你的回答记为已被接受。

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