[分享]css做图片过渡效果会闪一下

在使用CSS制作图片过渡效果时，我们可能会遇到一个问题，就是过渡时会出现图片闪烁的情况。

img {
    transition: opacity 1s;
}
img:hover {
    opacity: 0.5;
} 

以上代码是一个基本的图片过渡效果，当鼠标悬浮在图片上时，图片的不透明度会从1降至0.5，然后在1秒的时间内缓慢回到1。

然而，当我们实际运行该代码时，就会发现在图片在进行过渡时，会出现一瞬间的明亮，即闪一下的情况。

这是由于图片的缓存问题导致的，当我们将图片的不透明度从1降至0.5时，图片将会被重新加载一次，所以就会出现这样的情况。这是一种短暂的现象，但它会在一定程度上影响用户体验。

为了解决这个问题，我们可以通过一些方法来实现图片过渡效果而不出现闪烁的情况：

/*方法一*/
img {
    transition: opacity 1s;
    backface-visibility: hidden;
}
/*方法二*/
img {
    transition: opacity 1s;
    transform: translateZ(0);
} 

以上两种方法都是通过改变CSS的属性来解决图片闪烁的问题。其中，backface-visibility属性可以将元素的背面面对用户时隐藏，这样就可以避免图片闪烁的情况。而transform属性则是将元素变成一个3D元素，这样图片就会与屏幕平面垂直，不容易被重新加载。

总的来说，为了解决图片过渡效果闪烁的问题，我们需要理解图片缓存的机制，同时采取一些方法来规避这个问题，以保证用户获得更好的使用体验。