title: Is there a way to make CSS animation work diagonally?
body: <p>I have made a CSS animation that will animate the text give a shine effect to it. The effect currently only works with horizontal. I was wondering is there a way that I could change the direction of the animation to make it look like a realistic diagonal shine? </p>
  
  <p>Here is my current code:</p>
  
  <pre><code>h1 {
  
  font-family: 'BebasRegular', sans-serif;
  font-size: 150px;
  padding-bottom: 100px;
  padding-top: 50px;
  background: #E9AB17 -webkit-gradient(linear, left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat;
  -webkit-background-size: 155px;
  color: rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -webkit-animation-name: shine;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;    
  }
  
  @-webkit-keyframes shine
  {
  0%
  {
  background-position: top left;
  }
  28%,100%
  {
  background-position: top right;
  }
  }
  </code></pre>