如何让图像闪烁？答案

【问题标题】：How do you make an image blink?如何让图像闪烁？
【发布时间】：2012-08-20 08:42:48
【问题描述】：

我想知道如何在 CSS 中使图像闪烁，如果可能的话。我想让它在它所在的地方闪烁。

我也想改变速度，但主要是想让它闪烁。

【问题讨论】：

不要认为只使用 CSS 是可能的，但您可以使用 Javascript。
你能再解释一下“眨眼”吗？您是要让图像瞬间变亮，还是变白，还是换一种颜色？
<blink> 标签死于可怕的死亡是有原因的。
您可以为此使用 CSS 动画和关键帧，但这对于简单的眨眼来说可能有点矫枉过正。

【解决方案1】：

您可以使用 CSS 轻松完成。只需在图像的 CSS 元素中添加以下跨浏览器代码即可。如果您更改代码中的数字，您还可以设置时间。

-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
-webkit-animation:blink normal 2s infinite ease-in-out; 
-ms-animation:blink normal 2s infinite ease-in-out; 
animation:blink normal 2s infinite ease-in-out;

【讨论】：

【解决方案2】：

拯救 CSS 动画！

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

http://jsfiddle.net/r6dje/

您可以通过调整间隔使其急剧闪烁：

@keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

http://jsfiddle.net/xtJF5/1/

【讨论】：

如果我悬停，图像不会闪烁。有什么选择吗？
这很好，但它也需要 Chrome 浏览器的代码。
您还需要为keyframes（如-moz-keyframes、-webkit-keyframes等）、animation-iteration-count（如-moz-animation-iteration-count、-webkit-animation-iteration-count等）和animation（-moz-animation、-webkit-animation 等）。

【解决方案3】：

使用 Javascript 的 setInterval 方法将其用作 W3Schools 的引用，然后将 css 从 visibility:visible 更改为 visiblity:hidden 我们不会使用 display:none，因为它也会删除图像的空间，但我们确实需要图像空间才能使闪烁的东西起作用。

【讨论】：

顺便说一句，请在 SO 上创建一个正式帐户。这真的很有帮助。谢谢。希望我的回答有帮助。