title: CSS translate with keyframe animation and scale on hover not working together
body: <p>I'm relatively new to CSS. I saw a lot of similar topics but I couldn't find a solution to this problem so I'll ask away.</p>
  
  <p>I'm trying to create a photobanner with a keyframe animation where the images scroll to the left and scale with img:hover. The translation transform works fine and the scale transform works fine however, the latter only works if I remove the css for the keyframe animation. How can I get both transformation to work at the same time?</p>
  
  <p>My CSS is as follows:</p>
  
  <pre><code>.photobannerContainer {
      margin: 0 auto;
      width: 90%;
      overflow: hidden;
  }
  
  .photobanner {
      height: 480px;
      width: 8000px; /* To contain all the images end-to-end. */
  }
  
  .photobanner img {
      height:100%;
  
      transition: all .2s ease;
  
      /*If I remove these lines then the scale transformation will work.*/
      -webkit-animation: bannermove 30s linear infinite;
      -moz-animation: bannermove 30s linear infinite;
      -ms-animation: bannermove 30s linear infinite;
      -o-animation: bannermove 30s linear infinite;
      animation: bannermove 30s linear infinite;
  }
  
  .photobanner img:hover {
      transform: scale(1.1);
      -ms-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
  }
  
  @keyframes bannermove {
      0% { 
          transform: translateX(0); 
      }    
      100% { 
          transform: translateX(-3726px); 
      }
  }
  
  @-moz-keyframes bannermove {
      0% { 
          -moz-transform: translateX(0); 
      }    
      100% { 
          -moz-transform: translateX(-3726px); 
      }
  }
  
  
  
  @-webkit-keyframes bannermove {
      0% {
          -webkit-transform: translateX(0);
      }
      100% {
          -webkit-transform: translateX(-3726px);
      }
  }
  
  @-ms-keyframes bannermove {
      0% {
          -ms-transform: translateX(0);
      }
      100% {
          -ms-transform: translateX(-3726px);
      }
  }
  
  
  
  @-o-keyframes bannermove {
      0% {
          -o-transform: translateX(0);
      }
      100% {
          -o-transform: translateX(-3726px);
      }
  }
  </code></pre>
  
  <p>The HTML is set up as follows:</p>
  
  <pre><code>&lt;div class="photobannerContainer"&gt;
  &lt;div class="photobanner"&gt;
  
  &lt;img src="url"/&gt;
  
  &lt;img src="url"/&gt;
  
  &lt;img src="url"/&gt;
  
  &lt;img src="url"/&gt;
  
  &lt;img src="url"/&gt;
  
  &lt;img src="url"/&gt;
  
  &lt;img src="url"/&gt;
  
  &lt;img src="url"/&gt;
  
  &lt;img src="url"/&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you.</p>