清理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屋!