CSS3脉冲动画在IE和FF中不起作用 [英] CSS3 pulse animation not working in IE and FF

查看：106
本文介绍了CSS3脉冲动画在IE和FF中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我得到了一个循环无限的动画背景，它的工作原理非常好，就是Chrome和Safari。但在IE和FF中无法使用它。我试图看看其他人关于这个话题的问题，但仍然无法弄清楚。



CSS 

  .background_slider { 
宽度：100％; 
身高：100％; 
位置：固定; 
 top：5％; 
 z-index：-2; 
} 
 
 .animatie_bg {
动画：pulse 500s infinite; 
 -webkit-animation：脉冲500s无限; 
 -ms-animation：脉冲500s无限; 
 -o-animation：脉冲500s无限; 
 -moz-animation：脉冲500s无限; 
} 
 
 @keyframes pulse {
 0％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 
 12％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 $ b $ 12％{
 background：url（'../ images / background / deepblue.jpg'）; 
 background-size：cover; 
 
 
 37％{
 background：url（'../ images / background / green.jpg'）; 
 background-size：cover; 
 
 
 62％{
 background：url（'../ images / background / lightpink.jpg'）; 
 background-size：cover; 
 
 
 100％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 
 
 
 $ b @ -moz-keyframes pulse {
 0％{
 background：url（'。 ./images/background/bordaux.jpg'）; 
 background-size：cover; 
 
 
 12％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 $ b $ 12％{
 background：url（'../ images / background / deepblue.jpg'）; 
 background-size：cover; 
 
 
 37％{
 background：url（'../ images / background / green.jpg'）; 
 background-size：cover; 
 
 
 62％{
 background：url（'../ images / background / lightpink.jpg'）; 
 background-size：cover; 
 
 
 100％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 
 
 
 
 -webkit-keyframes pulse {
 0％{
 background：url（'。 ./images/background/bordaux.jpg'）; 
 background-size：cover; 
 
 
 12％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 $ b $ 12％{
 background：url（'../ images / background / deepblue.jpg'）; 
 background-size：cover; 
 
 
 37％{
 background：url（'../ images / background / green.jpg'）; 
 background-size：cover; 
 
 
 62％{
 background：url（'../ images / background / lightpink.jpg'）; 
 background-size：cover; 
 
 
 100％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 
 
 $ b @ -ms-keyframes fadeIn {
 0％{
 background：url（'../ images /背景/ bordaux.jpg'）; 
 background-size：cover; 
 
 
 12％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 $ b $ 12％{
 background：url（'../ images / background / deepblue.jpg'）; 
 background-size：cover; 
 
 
 37％{
 background：url（'../ images / background / green.jpg'）; 
 background-size：cover; 
 
 
 62％{
 background：url（'../ images / background / lightpink.jpg'）; 
 background-size：cover; 
 
 
 100％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 
 $ b @ -o-keyframes fadeIn {
 0％{
 background：url（'../ images / background / bordaux。 JPG'）; 
 background-size：cover; 
 
 
 12％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 $ b $ 12％{
 background：url（'../ images / background / deepblue.jpg'）; 
 background-size：cover; 
 
 
 37％{
 background：url（'../ images / background / green.jpg'）; 
 background-size：cover; 
 
 
 62％{
 background：url（'../ images / background / lightpink.jpg'）; 
 background-size：cover; 
 
 
 100％{
 background：url（'../ images / background / bordaux.jpg'）; 
 background-size：cover; 
 
 
 $ b

HTML 

 < div class =background_slider animation_bg>< / div>


解决方案

所以在Ilya Strelsyn的回答之后，我去寻找替代品。并提出这个：

CSS

$ c> .background_1 {
width：102％;
身高：102％;
动画：BG_one 500s无限;
位置：固定;
top：5％;
z-index：-2;
}

.background_2 {
width：102％;
身高：102％;
动画：BG_two 500s无限;
位置：固定;
top：5％;
z-index：-2;
}

.background_3 {
width：102％;
身高：102％;
动画：BG_three 500s无限;
位置：固定;
top：5％;
z-index：-2;
}

.background_4 {
width：102％;
身高：102％;
动画：BG_four 500s无限;
位置：固定;
top：5％;
z-index：-2;
}

@keyframes BG_one {
0％，100％{
opacity：1
}
12％{
不透明度：0.5
}
37％{
不透明度：0
}
62％{
不透明度：0
}
87％{
不透明度：0.5
}
}

@keyframes BG_two {
0％，100％{
不透明度：0.5
}
12％{
不透明度：1
}
37％{
不透明度：0.5
}
62％{
opacity：0
}
87％{
opacity：0
}
}

@keyframes BG_three {
0％，100％{
不透明度：0
}
12％{
不透明度：0
}
37％{
不透明度：0.5
}
62％{
不透明度：1
}
87％{
不透明度：0.5
}
}

@keyframes BG_four {
0％，100％{
opacity：0
}
12％{
opacity：0

37％{
不透明度：0.5
}
62％{
不透明度：1
}
87％{
opacity：0.5
}
}

HTML 

 < div class =background_1>< img alt =bordauxsrc =images /background/bordaux.jpg\"></div> 
< div class =background_2>< img alt =deepbluesrc =images / background / deepblue.jpg>< / div> 
< div class =background_3>< img alt =greensrc =images / background / green.jpg>< / div> 
< div class =background_4>< img id =AJHSBDalt =lightpinksrc =images / background / lightpink.jpg>< / div>

解决方案与第一次输出的输出不同。但由于它与其他浏览器不兼容，这是最佳选择。



再加上现在有更多的自定义功能。



谢谢大家！ b $ b

So I got a animating background that loops infinite, it works perfectly fine is Chrome and Safari. But can't get it too work in IE and FF. I tried to look at other people's questions about this topic but still couldn't figure out.

CSS

    .background_slider {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 5%;
     z-index: -2;
   }

   .animatie_bg{
     animation: pulse 500s infinite;
    -webkit-animation: pulse 500s infinite;
    -ms-animation: pulse 500s infinite;
    -o-animation: pulse 500s infinite;
    -moz-animation: pulse 500s infinite;  
   }

@keyframes pulse {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}


@-moz-keyframes pulse {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}


@-webkit-keyframes pulse {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}

@-ms-keyframes fadeIn {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}
@-o-keyframes fadeIn {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}

HTML

<div class="background_slider animation_bg"></div>

解决方案

So after Ilya Strelsyn's answer I went looking for a alternative. and came up with this:

CSS

.background_1 {
  width: 102%;
  height: 102%;
  animation: BG_one 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

.background_2 {
  width: 102%;
  height: 102%;
  animation: BG_two 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

.background_3 {
  width: 102%;
  height: 102%;
  animation: BG_three 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

.background_4 {
  width: 102%;
  height: 102%;
  animation: BG_four 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

@keyframes BG_one {
  0%, 100% {
    opacity: 1
  }
  12% {
    opacity: 0.5
  }
  37% {
    opacity: 0
  }
  62% {
    opacity: 0
  }
  87% {
    opacity: 0.5
  }
}

@keyframes BG_two {
  0%, 100% {
    opacity: 0.5
  }
  12% {
    opacity: 1
  }
  37% {
    opacity: 0.5
  }
  62% {
    opacity: 0
  }
  87% {
    opacity: 0
  }
}

@keyframes BG_three {
  0%, 100% {
    opacity: 0
  }
  12% {
    opacity: 0
  }
  37% {
    opacity: 0.5
  }
  62% {
    opacity: 1
  }
  87% {
    opacity: 0.5
  }
}

@keyframes BG_four {
  0%, 100% {
    opacity: 0
  }
  12% {
    opacity: 0
  }
  37% {
    opacity: 0.5
  }
  62% {
    opacity: 1
  }
  87% {
    opacity: 0.5
  }
}

HTML

  <div class="background_1"><img alt="bordaux" src="images/background/bordaux.jpg"></div>
  <div class="background_2"><img alt="deepblue" src="images/background/deepblue.jpg"></div>
  <div class="background_3"><img alt="green" src="images/background/green.jpg"></div>
  <div class="background_4"><img id="AJHSBD" alt="lightpink" src="images/background/lightpink.jpg"></div>

The solution does not the same output I had the first time. But since it was not compatible with other browsers, is this the best choice.

plus now there is more customizing possible.

Thank you all for your time!

这篇关于CSS3脉冲动画在IE和FF中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆