Pulizia dei nervosismi CSS

Question

Ho costruito questi cerchi che espandono un bordo quando c'è un mouseover. L'unico problema che sto avendo ora è che alcune volte il cerchio si agiterà/tremerà. E diventa più evidente quando imposto lo transition: all .1s ease-in-out; su più di .2s.

C'è un problema con questo problema o è proprio così?

Ecco il codice in JsFiddle

Grazie per qualsiasi aiuto!

MODIFICA: Sto passando le dimensioni (larghezza e altezza) dei cerchi per mantenere il centraggio. Mi rendo conto che questo sta causando il jitter durante la transizione. C'è un lavoro in giro?

Answer 1

mi sono liberato dei valori percentuali di alto/sinistra posizionamento, ripulito i margini e allineato il border-width del cerchio esterno:

Ecco un 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

Non transizione la larghezza e l'altezza. Mantieni la stessa larghezza e altezza e cambia solo il bordo della tua cerchia esterna.

Per la cerchia interna (.circle), impostare un bordo bianco di 12 pixel su #ffffff. Ora è sempre nello stesso posto rispetto al cerchio esterno, e ora non dovrà cambiare dimensione. Inoltre, il titolo non può saltare perché è sempre nella stessa posizione.

Per il cerchio esterno, quando non è al passaggio del mouse, assicurarsi che abbia le stesse dimensioni e il bordo di quando è, ma rendere il bordo bianco, 5 px solido #ffffff.

Penso che si possa anche eliminare un sacco di posizioni aggiuntive.

Qui è una versione modificata jsFiddle in modo da poter dare uno sguardo, e qui sta il CSS modificato:

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

Per inciso, mettendo un div o un p nel un tag rompe il tag per XHTML convalidato. Potresti invece voler usare un div, con un'azione "on-click" che lo fa comportare come un link.