CSS过渡故障 [英] CSS transition glitch

问题描述

我的CSS转换有问题.我创建了一个用户个人资料设计，当用户将鼠标悬停在个人资料照片上时，边框的宽度从3px更改为10px.这会导致整个站点在过渡过程中震动.

I have an issue with my CSS transition. I created a user profile design, and when a user hovers over the profile photo, the border changes its width from 3px to 10px. This results in the entire site shaking on the transition.

在这里可以看到震动！

CSS

#timeline-user > .timeline-user-border{
    border: 3px solid #2cbbee;
    padding: 7px;
    border-radius: 35px;
    width: 50px;
    height: 50px;
    -webkit-transition:all 0.2s ease;
}

#timeline-user > .timeline-user-border:hover{
    border: 10px solid #2cbbee;
    padding: 0;
    -webkit-transition:all 0.2s ease;
}

推荐答案

您可以使用

box-sizing:border-box;

基本上，添加和删除填充和边框的附加数学运算会引起很多混乱.您可以通过添加边框和内边距来对此进行否定.

basically the additional math of adding and removing paddings and borders causes alot of confusion. you can negate this by including the border and padding.

解决方案: http://jsfiddle.net/mvY4k/2/

希望这有助于解决您的问题以及其他任何相关问题！如果您还有其他疑问，请告诉我！:)

Hope this helps with your problem and any other related ones! Please let me know if you have any other questions! :)

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