如何在 CSS3 中制作闪烁的图像答案

【问题标题】：how to make a blinking image in CSS3如何在 CSS3 中制作闪烁的图像
【发布时间】：2016-02-13 12:33:57
【问题描述】：

我是 CSS3 的新手，正在编写用于闪烁图像的 CSS3 代码。我只需要显示一个不断闪烁的图像。我不能使用 GIF 图片，因为图片是动态的。

【问题讨论】：

您应该包含您尝试过的内容。您可能需要使用带有更改图像源的超时的 JavaScript。请务必在播放前预加载图像。
哦，我真傻...@Rameez rami：感谢您的回答

标签： css css-transitions css-animations

【解决方案1】：

这很简单......只需在图像的不透明度上使用 CSS3 动画

我希望这会有所帮助..

这是一个工作小提琴http://jsfiddle.net/rameezrami/27754r4f/1/ 或使用以下html

<html>
<head>
<style>
/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
.blink-image {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
</style>
</head>
<body>
<img class="blink-image" src="http://www.chicagoexcelclasses.com/wp-content/uploads/2014/04/css31-180x180.jpg">
</body>
</html>

【讨论】：