title: css3 animation not working on mobile chrome
body: <p>I have a background animation transition. it works on chrome, but not on chrome mobile. may i know which part is wrong? thanks.</p>
  
  <pre><code>.slideshow,
  .slideshow:after { 
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      z-index: 0; 
  }
  
  
  .slideshow li{
      list-style: none;
  }
  
  .slideshow li span { 
      overflow: hidden;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      color: transparent;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: none;
      opacity: 0;
      z-index: 0;
      animation: imageAnimation 32s linear infinite 0s; 
      -moz-animation: imageAnimation 32s linear infinite 0s; 
      -webkit-animation: imageAnimation 32s linear infinite 0s; 
  }
  
  .slideshow li:nth-child(1) span { 
      background-image: url(../img/sbg.jpg); 
  }
  .slideshow li:nth-child(2) span { 
      background-image: url(../img/sbg2.jpg);
      animation-delay: 8s; 
      -moz-animation-delay: 8s; 
      -webkit-animation-delay: 8s; 
  }
  .slideshow li:nth-child(3) span { 
      background-image: url(../img/sbg3.jpg);
      animation-delay: 16s; 
      -moz-animation-delay: 16s; 
      -webkit-animation-delay: 16s; 
  }
  .slideshow li:nth-child(4) span { 
      background-image: url(../img/sbg4.jpg);
      animation-delay: 24s; 
      -moz-animation-delay: 24s; 
      -webkit-animation-delay: 24s; 
  }
  
  @keyframes imageAnimation { 
      0% { opacity: 0; animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;}
      8% { opacity: 1; animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; }
      17% { opacity: 1; }
      25% { opacity: 0; }
      100% { opacity: 0 }
  }
  </code></pre>