清理CSS抖动 [英] Cleaning up CSS jitters

问题描述

我建立了这些社交圈，当有滑鼠游标悬停时，即可展开边框。我现在得到的唯一的问题是有些时候圈会抖动/摇动。当我将 transition：all .1s ease-in-out; 设置为大于.2s时，变得更加明显。

$ b $

这是 JsFiddle

感谢任何和所有的帮助！

EDIT ：我正在转换圈子的尺寸（宽度和高度）以保持居中。我意识到这是导致在过渡期间的抖动。有没有工作？

解决方案

我摆脱了顶部/左边定位的百分比值，清理边距和对齐外圈的边框宽度：

这里是 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; 
} 
  

I've built these circles that expand a border when there is a mouseover. The only problem I'm getting now is some times the circle will jitter/shake. And it becomes more apparent when I set the transition: all .1s ease-in-out; to more than .2s.

Is there a work around to this problem or is that just the way it is?

Here's the code in JsFiddle

Thanks for any and all help!

EDIT: I am transitioning the dimensions (width and height) of the circles to maintain centering. I realize this is causing the jittering during the transition. Is there a work around?

解决方案

I got rid of the percent values for top/left positioning, cleaned up the margins and aligned the border-width of the outer circle:

Here is a 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;
}

这篇关于清理CSS抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！