title: CSS animation - Animating image left to right and increasing height along an angled path
body: <p>At the moment I'm using css animation to move an image from the left to the right of the screen. This works without issue.</p>
  
  <p>What I want to do is actually have the animation start at a certain height then as it animates to the other side of the screen I want the height to gradually increase. So basically it moves upwards on a angle. I'm not sure how to achieve this. Do I set several key frames and change the screen position there? </p>
  
  <p>CSS</p>
  
  <pre><code>/* This is the controls for Santas sledge*/
  .santa {
      width: 1000px;
      position: absolute;
      top: -15%;
      left: -75%;
  }
  
  /* This is the controls for Santas sledge*/
  
  .santa {
      -webkit-animation: santa-move 1s 1s ease-out forwards;
  
      animation-duration: 26s;    
      -webkit-animation-duration: 26s;
  }
  
  @-webkit-keyframes santa-move {
          100% { left: 100%; }
  }
  </code></pre>