Cleaning up CSS jitters

Question

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?

Answer 1

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

Answer 2

Don't transition the width and the height. Keep the same width and height and just transition the border of your outer circle.

For your inner circle (.circle), set a white border 12px solid #ffffff. Now it is always in the same place relative to the outer circle, and now it will not have to change size. Also the title can not jump around because it is always in the same position.

For the outer circle, when it is not hovered, make sure it has the same size and border as when it is, but make the border white, 5px solid #ffffff.

I think you can then also do away with a lot of your extra positioning.

Here is a modified jsFiddle so you can take a look, and here is the CSS modified:

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

Incidentally, putting a div or a p in your a tag breaks the tag for validated XHTML. You may want to use a div instead, with an "on click" action added that causes it to behave as a link.

Answer 3

Debounce jitter by margin: 0 -12%; if adding padding padding: 0 12%;

menu li a:hover {
    margin: 0 -12%;
    padding: 0 12%;
    color: #fff;
    background: #ff5a5f;
    display: inline-block;
}