Pure CSS Slider doesn't work in Mobile Browsers

Question

I'm having an issue that has me stumped, I built this slider from the ground up which you can see at testing dot schwarttzy dot com. The code works fine on my desktop with IE12, FireFox, Chrome. The problem is when I'm using my Androids built in browser, or iPads built in browser (I Don't own one), all I get is a black empty box.

Trying to solve the issue on my own, I tried a dead simple slider I found at http://codepen.io/anon/pen/EVKbwv , which works fine in my androids factory browser on that page. Here's the problem, when I carry the code over to http://schwarttzy.com/help.html it does the same thing that's going on with my website, nothing more than a blank empty box.

body{background:#000;}

.container{
  margin:50px auto;
  width:500px;
  height:300px;
  overflow:hidden;
  border:10px solid;
  border-top-color:#856036;
  border-left-color:#5d4426;
  border-bottom-color:#856036;
  border-right-color:#5d4426;
  position:relative;

}
.photo{
  position:absolute;
  animation:round 16s infinite;
  opacity:0;

}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

How is this possible?

Answer 1

So I figured out the solution for me. I had forgotten that these old browsers still require the

-webkit-animation

and

@-webkit-keyframes

and the order is important too for some browsers, for example

.slide_padding.number_slides5 {
     animation:five_slide 50s infinite;
     -webkit-animation:five_slide 50s infinite;}

However, one thing that was adding to the confusion was transitions work fine in the old browsers. I find it odd that I don't need the webkit prefix for

transition:opacity 2s ease-in-out;