我已经建立了这些圈子展开边界时，有一个鼠标悬停。 现在我得到的唯一的问题是一些次圈将抖动/抖动。 当我设置它变得更加明显transition: all .1s ease-in-out; 比.2s更多。
有没有变通解决这个问题，或者是刚刚的事情是这样的？
下面是代码的jsfiddle
感谢您的任何和所有帮助！
编辑 ：我转变圆的尺寸（宽度和高度），以保持定心。 我知道这是在过渡期间引起抖动。 有没有解决办法？
Answer 1:
我摆脱了顶部/左侧定位的百分比值，清理边距和对齐外圆的边框宽度：
这里是一个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;
}
Answer 2:
不要过渡的宽度和高度。 保持相同的宽度和高度，只是转换你外圆的边界。
对于你的内循环（.circle），设置了白色的边框12px的固体#FFFFFF。 现在，它始终是相对于外圈相同的地方，而现在它不会改变大小。 也正因为它总是在同一位置的标题不能跳来跳去。
对于外圆，当不徘徊，请确保它具有相同的尺寸和边框当它是，但要边框白色，5px的固体#FFFFFF。
我想，那么你也可以做掉了很多你的额外的定位。
这是一种改性的jsfiddle所以你可以看看，这里是修改CSS：
.box {
position: relative;
width: 220px;
height: 220px;
float: left;
margin-right: 50px;
text-align: center;
}
.clearcircle {
width: 225px;
height:225px;
border-radius: 100%;
background-color: transparent;
border: 5px solid #ffffff;
transition: all .2s ease-in-out;
}
.clearcircle:hover {
border: 5px solid #c0392b;
}
.circle {
width: 200px;
height:200px;
border: 12px solid #ffffff;
border-radius: 100%;
background-color: #e74c3c;
overflow: hidden;
transition: all .2s ease-in-out;
}
.circle p {
position:relative;
text-align: center;
color: white;
transition: all .3s;
}
.circle:hover{
background-color: #e97468;
}
顺便说一下，把一个DIV或P在标签打破了验证XHTML标签。 您可能需要使用一个div来代替，具有“点击”加入行动，导致它表现为一个链接。
Answer 3:
通过余量去抖动的抖动：0 -12％; 如果添加填充填充：0 12％;
menu li a:hover {
margin: 0 -12%;
padding: 0 12%;
color: #fff;
background: #ff5a5f;
display: inline-block;
}
文章来源: Cleaning up CSS jitters
