CSS 动画并不总是在 iOS 8 Safari 中启动答案

【问题标题】：CSS animation not always starting in iOS 8 SafariCSS 动画并不总是在 iOS 8 Safari 中启动
【发布时间】：2015-05-26 23:47:11
【问题描述】：

我制作了一个幻灯片，它通过将三个内联块彼此相邻（都具有相同的背景图像）放在幻灯片容器中，并使用 translateX 将该容器向左移动 33%/对，在循环之前。三个内联块几乎可以确保它始终看起来是连续的，并且您永远不会在每个屏幕上看到接缝。

幻灯片被放置在另一个自己的容器中，典型宽度和溢出：隐藏用于裁剪长照片条并防止它拉伸浏览器窗口。

#container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slideshow {
    position: absolute;
    z-index: 5;
    top: 0;
    width: auto;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.slide {
    display: inline-block;
    height: 100%;
}

#about-slideshow {
    right: 0;
    -webkit-animation: slideshow-right 10s linear infinite;
    animation: slideshow-right 10s linear infinite;
}
#about-slideshow .slide {
    width: 964px;
    background: url('http://simplegrid.cochranesupply.com/images/slideshow-a.jpg') 0 0 repeat-x;
    background-size: 101%;
}

/* the animation */
@-webkit-keyframes slideshow-right {
    from {
        -webkit-transform: translateX(0);
    }
    to { 
        -webkit-transform: translateX(33.33333333333%);
    }
}
@keyframes slideshow-right {
    from {
        transform: translateX(0);
    }
    to { 
        transform: translateX(33.33333333333%);
    }
}

我的问题： 在 iPhone 5S 和 iPhone 6 Plus 上仔细查看后，有时似乎无法启动。它只会坐在那里。可能过一段时间就出问题了。如果我继续刷新，它有时会运行，有时不会。似乎完全不一致。

关于可能导致此问题的任何想法？看起来很简单。

这是我已确认在 iOS Safari 上显示问题的 CodePen：http://codepen.io/arickle/pen/pvGJBM

这是一个在 iOS 设备上拉起进行测试的全屏视图（请记住，一直刷新直到它停止——您不必特别快地刷新或任何东西）：http://codepen.io/arickle/full/pvGJBM/

【问题讨论】：

标签： html ios css mobile-safari css-animations

【解决方案1】：

好吧，我似乎至少偶然发现了一种解决方法。显然，如果移动 Safari 在加载过程中出现任何问题，或者无法跟上，或者某事，它就不会启动动画。我的解决方案只是将动画延迟 0.1 秒。这使浏览器有足够的时间来加载所有内容，然后每次都启动动画。

-webkit-animation: slideshow-right 10s 0.1s linear infinite;

傻。

【讨论】：

效果惊人！谢谢！