Question

我正在基于此代码在wordpress中实现一个仅限css的滑块（无jquery）：http://codepen.io/dudleystorey/pen/kFoGw

滑块没有在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中的滑块示例在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/

CSS滑块动画不仅仅适用于Safari？

1 个答案: