如何避免在盒子阴影过渡时出现闪烁？

Question

我的CSS 动画框阴影 悬停 。它适用于Firefox但在 Opera / Chrome 浏览器中导致闪烁。

是否可以在没有额外标记且没有伪元素的情况下修复它？

.hover {
    color: #fff;
    background:  rgba(0, 0, 0, 0.5);
    display: block;
    display: inline-block;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #fff;
    -webkit-transition: box-shadow linear 0.5s,color linear 0.5s;
    -moz-transition: box-shadow linear 0.5s,color linear 0.5s;    
    transition: box-shadow linear 0.5s,color linear 0.5s;
}
.hover:hover {
   box-shadow: inset 424px 0 0 0 #fff;
   color: #000;
}

<h1 class="hover">This is some really looong title!</h1>

Answer 1

尝试设置.01px

的方框图

＆＃13;

＆＃13;

.hover {
max-width: 400px;
    color: red;
    background-color:  blue;
    display: table;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0.01px white;    
    transition: all ease 5.5s;
}
.hover:hover {
    background-color:  blue;
   box-shadow: inset 440px 0 0 0 #fff;
   color: #000;
}

＆＃13;

<h1 class="hover">This&nbsp;is&nbsp;some&nbsp;really&nbsp;looong&nbsp;title!</h1>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

.hover {
    color: #fff;
    background:  rgba(0, 0, 0, 0.5);
    display: block;
    display: inline-block;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 0.01px #fff;
    -webkit-transition: box-shadow linear 0.5s,color linear 0.5s;
    -moz-transition: box-shadow linear 0.5s,color linear 0.5s;    
    transition: box-shadow linear 0.5s,color linear 0.5s;
}
.hover:hover {
   box-shadow: inset 424px 0 0 0.01px #fff;
   color: #000;
}

＆＃13;

<h1 class="hover">This is some really looong title!</h1>

＆＃13;

＆＃13;

＆＃13;