Animation 从中心生长

我一直在努力让底部的圆圈在Firefox中增长（需要添加其他前缀，仍在开发中）

他们表现正常，但我的目标是让他们从中心成长。关于如何使用CSS实现这一点，有什么想法吗？这会是一个定位问题吗？链接如下：

---

我只是在悬停时增加宽度/高度。

添加负的左上边距，等于大小变化的一半（

-15px

）

如果使用CSS3，可以使用属性转换并缩放元素

Obs：为了避免太多代码，我省略了前缀，但您应该使用它们

---

正在运行的演示：

立即查看。这看起来确实好得多，但一开始它会跳起来。想法？宾果，选错了。谢谢你，你可能也应该以内容为中心。我知道你得到了答案。只想说我爱你的公司名称和标志！猫FTW：在工作演示中（顺便说一句，非常好），你是说你的一些转换是0.5秒和2.0秒吗？这不是den232的意图，所有这些都应该是0.5秒谢谢。我现在明白了。jb

.circle {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    transform: scale(0.1); /* 1/10 of the original size */
    transition: all 1s ease-in-out;
}
.circle.opened {
    transform: scale(1);
}