如何避免盒子阴影过渡时闪烁？ [英] How to avoid flickering on box shadow transition?

问题描述

我有一个CSS，可以对框阴影进行 悬停 。它可以在Firefox上运行，但会导致 Opera / Chrome 浏览器中闪烁。

I have CSS that animates box shadow on hover. It works on Firefox but causes flickering in Opera/Chrome browser.

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

Is it possible to fix it without extra markup and without pseudo elements?

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

推荐答案

尝试将框阴影设置为.01px

Try setting a boxshadow of .01px

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

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

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

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

这篇关于如何避免盒子阴影过渡时闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！