html - 清理CSS抖动

我建立了这些圆圈，将它们悬停在鼠标悬停时会扩大边界。我现在遇到的唯一问题是圆圈有时会抖动/抖动。当我将transition: all .1s ease-in-out;设置为大于.2s时，这一点变得更加明显。

是否有解决此问题的方法，或者就是这样？

这是JsFiddle中的代码

感谢您提供的所有帮助!

编辑:我正在过渡圆的尺寸(宽度和高度)以保持居中。我意识到这会导致过渡期间的抖动。有没有解决的办法？

最佳答案

我摆脱了顶部/左侧位置的百分比值，清理了边距并对齐了外圆的边框宽度:

这是一个DEMO

.box {
    position: relative;
    width: 220px;
    height: 220px;
    float: left;
    margin-right: 50px;
}

.clearcircle {
    position: absolute;
    top:15px;
    left:15px;
    width: 190px;
    height:190px;
    border-radius: 100%;
    background-color: transparent;
    border: 5px solid #c0392b;
    transition: all .2s ease-in-out;
}

.clearcircle:hover {
    width:220px;
    height: 220px;
    top: 0px;
    left: 0px;
    border: 5px solid #c0392b;

}
.circle {
    position: absolute;
    top:50%;
    margin-top: -100px;
    left: 50%;
    margin-left:-100px;
    width: 200px;
    height:200px;
    border-radius: 100%;
    background-color: #e74c3c;
    overflow: hidden;
    transition: all .2s ease-in-out;

}


.circle p {
    position:relative;
    text-align: center;
    top: 50%;
    margin-top: -55px;
    color: white;
    transition: all .3s;
}


.circle:hover{
    background-color: #e97468;
}

关于html - 清理CSS抖动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16532809/