从中心增长[关闭]答案

【问题标题】：Grow from center [closed]从中心增长[关闭]
【发布时间】：2018-01-30 06:00:34
【问题描述】：

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

他们表现得很好，但我的目标是让他们从中心成长。关于如何使用 CSS 来做到这一点的任何想法？会不会是定位问题？链接在这里：http://www.catonthecouch.com/feline/

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

【问题讨论】：

我知道你得到了答案。只想说我喜欢您的公司名称和徽标！猫 FTW：D

标签： animation css

【解决方案1】：

如果您使用的是 CSS3，则可以使用属性变换，并缩放元素。

Obs：我省略了前缀以避免代码过多，但你应该使用它们。

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

工作演示：http://jsfiddle.net/JCMais/eKs59/

【讨论】：

在工作演示中（顺便说一句，非常好），你的意思是你的一些过渡是 0.5s 和一些 2.0s 吗？
这不是@den232的意图，它们都应该是0.5
谢谢。我现在明白了。 jb

【解决方案2】：

添加负的左边距和上边距等于大小变化的一半 (-15px)

【讨论】：

立即查看。看起来确实好多了，但一开始它会跳。想法？
宾果游戏，放错了。谢谢
您可能还应该保持内容居中。