Css @-webkit-keyframes won't work on chrome

whats newxt · 13-04-2015 02:07PM #1

Css @-webkit-keyframes won't work on chrome it works in firefox but not chrome any idea what the problem is here?

HTML:

<div id="slider">
<figure>
<img src="images/slider 1.png" alt="">
<img src="images/slider 2.png" alt="">
<img src="images/slider 3.png" alt="">
<img src="images/slider 4.png" alt="">
<img src="images/slider 5.png" alt="">
</figure>
</div>

CSS:

@-webkit-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%; }
}

body { margin: 0; } 
z-index:-100;
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 12s slidy infinite; 
}

whats newxt · 13-04-2015 02:34PM

It also won't hide the overflow

Here's the codepen: http://codepen.io/dudleystorey/pen/ehKpi

whats newxt · 15-04-2015 11:20AM

It's ok i figured it out just add the prefix -webkit- to animation: 12s slidy infinite;

and it works in chrome, firefox, safari but not internet exploder. I must say it's a nice little css3 slider.

Css @-webkit-keyframes won't work on chrome

Comments