html导致桌面闪烁,使用CSS动画导致div的背景有闪烁的光线效果

好吧，我正在帮助我的兄弟建立一个网站，他的背景中的主要图像是他工作的一块。我们希望图像转换到另一个PNG并来回模拟闪烁的蜡烛组。使用CSS动画导致div的背景有闪烁的光线效果

我真的很新的CSS动画，我的第一个尝试是加载基本图像作为标题DIV的默认背景，并使用叠加图像做动画，但这导致与文本和其他信息DIV的顶部。

所以理想情况下，我希望将这两个图像都作为背景放在DIV上，让它从0％不透明度缓慢过渡到100％不透明度和交替。我完全确定只能使用IE 10或更高版本的解决方案。

这里是CSS尝试

header{

background: url(../images/header_bg_1.png);

background-size: cover;

background-repeat: no-repeat;

}

.section_overlay {

-webkit-animation-name: example;

-webkit-animation-duration: 4s;

animation-name: animateheader;

animation-duration: 4s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

@-webkit-keyframes animateheader{

0% { opacity: 0; }

100% { opacity: 1; }

}

@-moz-keyframes animateheader{

0% { opacity: 0; }

100% { opacity: 1; }

}

@-o-keyframes animateheader{

0% { opacity: 0; }

100% { opacity: 1; }

}

@keyframes animateheader{

0% { opacity: 0; }

100% { opacity: 1; }

}

下面是HTML件

Toggle navigation

• Home
• Services
• About
• Testimonial
• Work
• Contact

it’s MrCreeep

Tag Line would go Here

这里是两次直接链接到图片。第一个应该过渡到第二个，然后再回来，如果你可以提供任何帮助，使它看起来更加动态和闪烁，而不仅仅是一个标准的淡入和淡出，我将非常感激。

+1

代码中的第二个图像链接在哪里？ –

+0

你也可以发布你的整个代码？或更好地提供链接，如果你有它的生活。至少提供完整的头文件。 –

+0

至于你的评论“更动态和闪烁”：你是否在寻找一个纯粹的CSS解决方案(我不确定是解决方案，尽管我不是CSS大师)，还是JS/jQuery解决方案？你希望不透明度是随机的吗？ –