html - CSS slider 动画不能只在 safari 中工作？

Question

我正在基于以下代码在 wordpress 中实现一个仅 css slider (无 jquery):http://codepen.io/dudleystorey/pen/kFoGw

slider 在 safari 中没有进行转换的问题，在其他浏览器(如 chrome、FF)中工作正常。

<div id="captioned-gallery">
    <figure class="slider">
                <figure>
            <img src="http://localhost/wp/wp-content/uploads/2015/09/utah-peak.jpg" alt>
            <figcaption>Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.</figcaption>       </figure>

                <figure>
            <img src="http://localhost/wp/wp-content/uploads/2015/09/hobbiton-lake.jpg" alt>
            <figcaption>Utah Mountains Valley in United States</figcaption>     </figure>

            ... 

            </figure>
</div>

和CSS规则

/* Frontpage Slider */

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

figure { 
  margin: 0; 
  font-family: sans-serif;
  font-weight: 100;
}
div#captioned-gallery { 
  width: 100%; overflow: hidden; 
}
figure.slider { 
  position: relative; width: 500%; 
  font-size: 0; animation: 20s slidy infinite; 
}
figure.slider figure { 
  width: 20%; height: auto;
  display: inline-block;  position: inherit; 
}
figure.slider img { width: 100%; height: auto; }

figure.slider figure figcaption { 

  position: absolute; top:30%; left:10%; width:75%; text-align:center;
  line-height: 160%; 

  background: rgba(0,0,0,0.3);
  color: #fff; 
  font-size: 3vw; padding: .6rem; 
}

codepen 中的 slider 示例在 safari 中运行良好，但我的代码中存在问题。

我正在像这样连接 wordpress 中的所有样式表和脚本(注意顺序)

wp_enqueue_style('pure-min', get_template_directory_uri().'/pure/pure-min.css');
wp_enqueue_style('pure-responsive-min', get_template_directory_uri().'/pure/grids-responsive-min.css');
wp_enqueue_style( 'default', get_stylesheet_uri() ); // default stylesheet

wp_register_style('ezy-font-light','http://fonts.googleapis.com/css?family=Raleway:300|Oswald:300');
wp_register_style('ezy-font-dark','http://fonts.googleapis.com/css?family=Raleway|Oswald');

wp_enqueue_style('css-font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

Answer 1

需要添加-webkit-前缀。

 @-webkit-keyframes slidy {

和

 -webkit-animation: slidy 5s;

学习所有前缀:

https://css-tricks.com/snippets/css/keyframe-animation-syntax/