如何从CSS按钮动画中删除闪烁？ [英] How to remove flicker from CSS button animation?

问题描述

我正在研究一个项目，在那里我有一个动画按钮，它用颜色填充它自己。

I'am working on one project, where I have one animated button where it fills itself with color.

以下是HTML代码：

Here is HTML code:

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

这里是CSS代码：

Here is CSS code:

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

您可以在这里看到它的行动:-)：

You can see it here in action :-) :

https://jsfiddle.net/m8f1k3sp/

这个代码的问题是，当按钮填满时，它随机闪烁，我不知道为什么。也许我忘了在CSS中添加一些东西，或者其他的东西是错误的，我不知道。感谢您的帮助！ ： - ）

The problem with this code is that while the button fills itself, it flickers randomly and I don't know why. Maybe I just forgot to add something in CSS, or something else is wrong, I don't know. Thank you for your help! :-)

推荐答案

只需将1px添加到传播半径，我不知道为什么它会发生在0传播半径可能浏览器渲染的东西？但添加1px将解决问题

Just add 1px to the spread radius, I Don't know why it happens with 0 spread radius could be a browser rendering thing? But adding 1px there will fix the issue

https： //jsfiddle.net/m8f1k3sp/6/

CSS

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

这篇关于如何从CSS按钮动画中删除闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！