title: CSS animation move dot diagnoally
body: <p>Here is the animation that I want to create step by step:</p>
  
  <ol>
  <li>A dot is located in the top left corner</li>
  <li>The dot expands diagonally to the bottom right corner</li>
  <li>The expanded dot shrinks to a dot to the bottom right corner</li>
  </ol>
  
  <p>Here is <a href="http://codepen.io/cguo/pen/NNgoNy" rel="nofollow">a snippet</a> that accomplishes step 1 &amp; 2 but I don't know how to do step 3. </p>
  
  <p>The dot is rotated by -45 degrees to make it expand diagonally:</p>
  
  <pre><code>.a 
    top: 0
    left: 0
    background-color: $slack-green
    transform: rotate(-45deg)
    transform-origin: top left
    animation: slack-animation-a $duration infinite
  </code></pre>
  
  <p>Then, it is animated like this:</p>
  
  <pre><code>@keyframes slack-animation-a 
    0%
      top: 0 
      height: $dot-diameter
  
    33%
      top: 0
      height: $slack-size
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #DDD;
  }
  .c-slack {
    position: relative;
    z-index: 100;
    margin: 80px auto;
    width: 96px;
    height: 96px;
  }
  .c-slack_dot {
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 9px;
  }
  .a {
    top: 0;
    left: 0;
    background-color: #3eb991;
    transform: rotate(-45deg);
    transform-origin: top left;
    animation: slack-animation-a 2s infinite;
  }
  @keyframes slack-animation-a {
    0% {
      top: 0;
      height: 18px;
    }
    33% {
      top: 0;
      height: 96px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="c-slack"&gt;&lt;span class="c-slack_dot a"&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help and suggestion is appreciated!</p>