title: Why is this CSS code only working in Chrome?
body: <p>Why the code to <a href="http://www.sytemaker.com/development/css-bits/slideshow.html" rel="nofollow noreferrer">this page</a> only works in Chrome? </p>
  
  <p>It seems to work in all browsers if I only use background colours rather than images. Is it possible that images aren't included for animations yet?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  
  div.slideshow
  {
  width:957px;
  height:310px;
  margin:0;
  padding:0;
  border:0;
  border-collapse:collapse;
  background-image:url('about.jpg');
  position:relative;
  animation-name:myfirst;
  animation-duration:60s;
  animation-timing-function:cubic-bezier(0.5,0,0.5,1);
  animation-delay:5s;
  animation-iteration-count:infinite;
  animation-direction:normal;
  animation-play-state:running;
  
  /* Safari and Chrome: */
  -webkit-animation-name:myfirst;
  -webkit-animation-duration:60s;
  -webkit-animation-timing-function:cubic-bezier(0.5,0,0.5,1);
  -webkit-animation-delay:5s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:normal;
  -webkit-animation-play-state:running;
  }
  
  @keyframes myfirst
  {
  0%   {background-image:url('about.jpg');}
  25%  {background-image:url('exhibitions.jpg');}
  50%  {background-image:url('exhibitions2.jpg');}
  75%  {background-image:url('medical.jpg');}
  100% {background-image:url('about.jpg');}
  }
  
  @-webkit-keyframes myfirst /* Safari and Chrome */
  {
  0%   {background-image:url('about.jpg');}
  25%  {background-image:url('exhibitions.jpg');}
  50%  {background-image:url('exhibitions2.jpg');}
  75%  {background-image:url('medical.jpg');}
  100% {background-image:url('about.jpg');}
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="slideshow"&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>