title: CSS3 pulse animation not working in IE and FF
body: <p>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. </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    .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;
  
    }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="background_slider animation_bg"&gt;&lt;/div&gt;
  </code></pre>