title: @keyframes not working in chrome desktop (IE/Chrome mobile all OK)
body: <p>I'm trying to create a scrolling photo banner. It is working on IE, safari (mobile), and chrome on android and iphone. It is not working on my desktop or if I request desktop site on any chrome device. I've spent hours googling trying to figure this out and cannot work it out at all. 
  This is my first time asking a question so if something is wrong in my post please bear with me. Thank you </p>
  
  <pre><code>#container {
  width: 100%;
  overflow: hidden;
  margin: 5px;
  background: white;
  }
  
  .photobanner {
  height: 350px;
  width: 3550px;
  margin-bottom: 10px;
  }
  
  .photobanner img {
  margin: 10px;
  max-height: 300px;
  margin-top: 30px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  
        /*keyframe animations*/
  .first  {
  -webkit-animation: bannermove 30s linear infinite;
          animation: bannermove 30s linear infinite;
  }
  
  @keyframes "bannermove" {
  0% {
  margin-left: 0px;
   }
   100% {
  margin-left: -2125px;
   }
  
  }
  
  
  @-webkit-keyframes "bannermove" {
   0% {
     margin-left: 0px;
   }
   100% {
     margin-left: -2125px;
   }
  
  }
  
  
      /* Landscape phones and down */
  @media (max-width: 750px) {#container {
      width: 100%;
      overflow: hidden;
      margin: 5px 5px;
      background: white;
  }
  .photobanner {
  height: 160px;
  width: 3550px;
  margin-bottom: 5px;
      }
  
  .photobanner img {
  margin: 5px;
  max-height: 150px;
  margin-top: 5px;
      }
  }
  </code></pre>