Html 奇怪的 CSS3 过渡（闪烁）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10134935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Weird CSS3 Transition (flickering)
提问by Jürgen Paul
When I hover unto my button, it gives a white flash first when starting the transition. Why does it sort of flickers when I apply a css3 transition to my button? My browser is Google Chrome
当我将鼠标悬停在我的按钮上时，它会在开始过渡时首先发出白色闪光。为什么当我将 css3 过渡应用于我的按钮时它会闪烁？我的浏览器是谷歌浏览器
See here
看这里
<button>Log In</button>?
CSS:
CSS：
button {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
border:1px solid #890000;
display:block;
margin:0 auto;
width:200px;
padding:5px 0;
border-radius:8px;
color:#fff;
font-weight:700;
text-shadow:0 1px 1px #000+50;
box-shadow:0 2px 3px #000+150;
-webkit-transition:background linear .5s;
}
button:hover {
background:#ff3019;
}
button:active {
background:#cf0404;
}
?
?
回答by Miguel ángel Arroyo Rosales
I got rid of the flickering. Add ?-webkit-backface-visibility: hidden;? to the elements you are transitioning. Voilà!
我摆脱了闪烁。添加 ？-webkit-backface-visibility: hidden;? 到您正在过渡的元素。瞧！
回答by JanTheHuman
Miguel is right about backface-visiblity fixing the annoying flash. However, I'm using transform scale and the SVG animated will not be sharp after scaling. It is sharp if you don't use the backface-visiblity property.
Miguel 关于背面可见性修复恼人的闪光灯是正确的。但是，我使用的是变换比例，并且缩放后动画 SVG 不会很清晰。如果您不使用背面可见性属性，它会很清晰。
So either you got a nice animation with a blurry graphic, or a nice looking graphic with screen flashes.
因此，要么您获得了带有模糊图形的漂亮动画，要么是带有屏幕闪烁的漂亮图形。
You can however add the following line to the parent of the object to be transitioned, which will fix the flashing of the screen and still renders your graphic sharp after scaling.
但是，您可以将以下行添加到要转换的对象的父级，这将修复屏幕闪烁并在缩放后仍使图形清晰。
-webkit-transform: translate3D(0, 0, 0);
回答by Graham Conzett
I believe it is currently an issue without a fix. I too have run into this before playing around and could not get it to work. Using a solid color seems to be fine, or faking it with a background image.
我相信这是目前没有修复的问题。在玩之前我也遇到过这个问题并且无法让它工作。使用纯色似乎没问题，或者用背景图像伪造它。
Similar Question here: Webkit support for gradient transitions
类似问题在这里：Webkit support for Gradient transitions
More detail: http://screenflicker.com/mike/code/transition-gradient/
更多细节：http: //screenflicker.com/mike/code/transition-gradient/
回答by Funktr0n
The flicker you're noticing is actually the button's background color being changed to transparent (so, the button "flashes" or turns white in your Fiddle because the body's background-color is white).
您注意到的闪烁实际上是按钮的背景颜色变为透明（因此，按钮在 Fiddle 中“闪烁”或变为白色，因为主体的背景颜色是白色）。
If you overlay your button on top of another element with the exact same size/height/background-color (including gradients), the "flicker" won't be noticeable.
如果您将按钮叠加在具有完全相同大小/高度/背景颜色（包括渐变）的另一个元素之上，则“闪烁”将不明显。
Check here for an example using your fiddle: http://jsfiddle.net/hrDff/12/
在此处查看使用小提琴的示例：http: //jsfiddle.net/hrDff/12/
Still definitely a bug tho...
仍然绝对是一个错误...
回答by Dave
This link fixed it for me. You just have to add a line to the css of the element that's flickering:
这个链接为我修复了它。您只需要在闪烁的元素的 css 中添加一行：
http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit
http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit
回答by subutai5467
I think the issue is that you are switching from a linear-gradient background to a solid background color for Google Chrome and Microsoft Edge web browsers. To fix this issue you would add a similar linear-gradient background to your pseudo classes, in this case the :hover and the :active. I tried it myself on your jsfiddle and I had no flashing in the rendering while hovering over the button.
我认为问题在于您正在从线性渐变背景切换到 Google Chrome 和 Microsoft Edge 网络浏览器的纯色背景。要解决此问题，您需要为伪类添加类似的线性渐变背景，在本例中为 :hover 和 :active。我自己在你的 jsfiddle 上尝试过，当鼠标悬停在按钮上时，渲染中没有闪烁。
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);I changed the top color of the linear-gradient to give a noticeable change to the hover effect.
我更改了线性渐变的顶部颜色，以显着改变悬停效果。
button:hover {
background: -webkit-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
}There are no more issues with flashing when I hover over the button in Chrome or Microsoft Edge. I hope this helps.
当我将鼠标悬停在 Chrome 或 Microsoft Edge 中的按钮上时，不再有闪烁问题。我希望这有帮助。
回答by Irene S.
With a similar issue, Jan's suggestions helped improve for all background images but one. I got rid of the flickering of the last one by noticing two conflicting positioning rules. I had for a position:staticone rule margin-top:-3em(minus) and the other one margin-top:5em(plus). Thus, I suggest you carefully check the consistency of the positioning when you experience such an issue.
对于类似的问题，Jan 的建议有助于改进所有背景图像，但只有一个。通过注意到两个相互冲突的定位规则，我摆脱了最后一个的闪烁。我有position:static一个规则margin-top:-3em（减号）和另一个margin-top:5em（加号）。因此，建议您在遇到此类问题时，仔细检查定位的一致性。
In your case Michelle, I've been testing with a longer delay 1s to 3s, which helped me understand what is that clearer stage, a flash with a very short delay. Your gradient starts with no background in fact and what you see is the background of the page. I got this information by changing the background of the body of my test page from ivory to black.
在你的情况下，米歇尔，我一直在测试更长的延迟 1 到 3 秒，这帮助我理解什么是更清晰的阶段，一个延迟很短的闪光。你的渐变实际上没有背景，你看到的是页面的背景。我通过将测试页正文的背景从象牙色更改为黑色来获得此信息。
When I tried your gradient on a black background I got a black stage/flash (easier to see at 3s). Perhaps it should be wise to test the order of your rules, and also try to understand why the gradient starts from the background of the body or parent and not from your background.
当我在黑色背景上尝试你的渐变时，我得到了一个黑色的舞台/闪光灯（在 3 秒时更容易看到）。也许明智的做法是测试您的规则的顺序，并尝试理解为什么渐变从主体或父级的背景而不是从您的背景开始。
A workaround could be to set your button in a div with your button red background at the exact size and shape of your button.
解决方法可能是将按钮设置在 div 中，按钮红色背景与按钮的确切大小和形状相同。
回答by Youth overturn
I solved the blinking like this:
我解决了这样的闪烁：
Html as follows:
html如下：
<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>
css as follows:
css如下：
.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
