纯 CSS 滑块在移动浏览器中不起作用

Question

我遇到了一个让我难过的问题，我从头开始构建了这个滑块，您可以在测试 dot schwarttzy dot com 时看到它。该代码在我的桌面上使用 IE12、FireFox、Chrome 运行良好。问题是当我使用内置浏览器的 Android 或内置浏览器的 iPad（我没有）时，我得到的只是一个黑色的空框。

为了自己解决这个问题，我尝试了一个我在 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 找到的非常简单的滑块，它做的事情和我的网站上发生的一样，只不过是一个空白的空框。

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;}

这怎么可能？

Answer 1

所以我找到了适合我的解决方案。我忘记了这些旧浏览器仍然需要

-webkit-animation

和

@-webkit-keyframes

对于某些浏览器来说顺序也很重要，例如

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

然而，增加混乱的一件事是转换在旧浏览器中工作正常。我觉得我不需要

的 webkit 前缀很奇怪

transition:opacity 2s ease-in-out;

纯 CSS 滑块在移动浏览器中不起作用

Pure CSS Slider doesn't work in Mobile Browsers

css

android

ipad

css-transitions

css-animations