html - 如何消除 CSS 按钮动画的闪烁？

Question

我正在开发一个元素，其中有一个动画按钮，它会自动填充颜色。

这是 HTML 代码:

<input type="submit" class="button" value="Button">

这里是 CSS 代码:

.button{
    border: 3px solid #1161ee;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 rgba(17,97,238,0);
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    transition: all ease 0.8s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;   
}

.button:hover {
    box-shadow: inset 51px 0 0 0 #1161ee;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;    
}

您可以在这里看到它的实际效果:-) :

https://jsfiddle.net/m8f1k3sp/

这段代码的问题是，当按钮自动填充时，它会随机闪烁，我不知道为什么。也许我只是忘记在CSS中添加一些东西，或者其他什么地方是错误的，我不知道。感谢您的帮助! :-)

Answer 1

只需将 1px 添加到展开半径，我不知道为什么会出现 0 展开半径可能是浏览器渲染的问题？但在那里添加 1px 将解决问题

https://jsfiddle.net/m8f1k3sp/6/

CSS

.button:hover {
     box-shadow: inset 51px 0 0 1px #1161ee;
     -webkit-perspective: 1000;
     -webkit-backface-visibility: hidden;    
}