背景的CSS动画在IOS中不起作用

Question

我的幻灯片在iPhone中不起作用。它在Android和Windows上都是这样的。

我这方面有什么错误吗？

​

#slideshow  {
  color: #EEEEEE;
  position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    animation-name: example;
  -webkit-animation: example 20s infinite; /* Safari 4.0 - 8.0 */
    animation: example 20s infinite;
  width: 100%;
  height: 800px; 
  font-size: 20px;
  -webkit-animation-delay: 1s;

}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {
    background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/170781.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  25%  {
    background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/169652.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  50%  {
    background-image: url(https://i.ytimg.com/vi/6zVp8ETUDU4/maxresdefault.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  75%  {
    background-image: url(https://i.ytimg.com/vi/5oJbLGNj_uw/maxresdefault.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  100% {
    background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/170781.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

/* Standard syntax */
@keyframes example {
  0%   {
    background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/170781.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  25%  {
    background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/169652.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  50%  {
    background-image: url(https://i.ytimg.com/vi/6zVp8ETUDU4/maxresdefault.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  75%  {
    background-image: url(https://i.ytimg.com/vi/5oJbLGNj_uw/maxresdefault.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  100% {`enter code here`
    background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/170781.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

<div id="slideshow"></div>

​

Answer 1

像-webkit-animation-name一样，重写其他属性，比如animation-duration和animation-iteration-count，而不是速记符号。