title: Adding an opacity change and a transform in CSS
body: <p>How do I combine these two animations (translate &amp; buttonFade) so that they both affect the same image ? Both animations work seperatley but not together. Is there a way to combine the two? (I have omitted the -moz- , -o- etc purposefully to make it easier to read, I have tried adding these and it makes no difference)</p>
  
  <pre><code>translate {
  -webkit-animation: moveLeft 1s forwards;
  }
  
  @-webkit-keyframes moveLeft {
  0% {-webkit-transform: translateX(0px)}
  100% {-webkit-transform: translateX(100px)}
  }
  
  
  
  
  .intro-button{
  position:absolute;
  top: 350px;
  left: 625px;
  opacity: 0;
  -webkit-animation: buttonFade 3s 1 forwards;
  -webkit-animation-delay: 2s;
  }
  
  @-webkit-keyframes buttonFade {
  0% {opacity: 0;}
  80% {opacity: 0;}
  100% {opacity: 1;}
  }
  </code></pre>
  
  <p>Any help would be much appreciated!</p>