CSS 过渡故障答案

【问题标题】：CSS transition glitchCSS 过渡故障
【发布时间】：2013-09-26 02:56:25
【问题描述】：

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

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

【问题讨论】：

标签： css translation

【解决方案1】：

你可以使用

box-sizing:border-box;

基本上，添加和删除填充和边框的额外数学会导致很多混乱。您可以通过包含边框和填充来否定这一点。

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

希望这对您的问题和任何其他相关问题有所帮助！如果您有任何其他问题，请告诉我！ :)

【讨论】：

【解决方案2】：

据 Smashing Magazine 的 this article 报道：

在 Firefox 和 Webkit 中转换多个属性不同步。您可以see in this example 如何使边框变小与填充增加相同的量（反之亦然）会导致以下内容有点晃动。 IE 10 和 Opera 做到了这一点。

事实上，如果你改变：

-webkit-transition:all 0.2s ease;

到：

-webkit-transition:width 0.2s ease;

您会注意到您的元素不再抖动。

不过，我不知道解决方案，如果我有代表，我会将此作为评论发布。

【讨论】：

我在 Opera 上，我也可以看到震动。所以我想它适用于所有基于 Webkit 的浏览器 :)
当我将它设置为所有时，我遇到了各种疯狂的动画故障。只转换一个属性可以解决这个问题。不错！

【解决方案3】：

使用盒子阴影：

演示：http://jsfiddle.net/mvY4k/4/

   #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{
        -webkit-box-shadow:inset 0 0 0 10px #2cbbee;
        -moz-box-shadow:inset 0 0 0 10px #2cbbee;
        box-shadow:inset 0 0 0 10px #2cbbee;
    }

更简单的http://jsfiddle.net/qRJQY/1/

<div class="timeline-user-line">
    <img src=http://api.randomuser.me/0.2/portraits/men/32.jpg />
</div>

风格：

*{
    box-sizing:border-box;
    padding:0;
    margin:0;
}


.timeline-user-line{
    border-radius: 100%;
    width: 50px;
    height: 50px;
    position:relative;
    border: 3px solid #2cbbee;
     -webkit-transition:all 0.2s ease;
    cursor:pointer;
    -webkit-box-shadow:inset 0 0 0 0px #2cbbee;
    -moz-box-shadow:inset 0 0 0 0px #2cbbee;
    box-shadow:inset 0 0 0 0px #2cbbee;
}

.timeline-user-line:before,.timeline-user-line:after{
    content:'';
    position:absolute;

}
.timeline-user-line:before{
    background:#2cbbee;
    height: 2px;
    width: 40px;
    right:-50px;
    top:20px;
}

.timeline-user-line img{
    width:80%;
    height:80%;
    position:absolute;
    left:10%;
    top:10%;
    border-radius: 100%;
}

.timeline-user-line:hover{
    -webkit-box-shadow:inset 0 0 0 10px #2cbbee;
    -moz-box-shadow:inset 0 0 0 10px #2cbbee;
    box-shadow:inset 0 0 0 10px #2cbbee;
}

【讨论】：