title: Draw a line (path) with pure CSS from one point to another
body: <p>I have a image animating in this path below and would like the path to be visible.</p>
  
  <p>CSS</p>
  
  <pre><code>div {
      width:10px;
      height:10px;
      background:red;
      position:relative;
      -webkit-animation-name:Player1;
      -webkit-animation-duration:100s;
      -webkit-animation-timing-function:cubic-bezier(0.1,0.1,0.1,0.1);
      -webkit-animation-delay:2s;
      -webkit-animation-iteration-count:5;
      -webkit-animation-direction:normal;
      -webkit-animation-play-state:running
  }
  
  @-webkit-keyframes Player1 {
  0% {
      background:red;
      left:20px;
      top:20px
  }
  
  25% {
      background:#ff0;
      left:800px;
      top:200px
  }
  
  50% {
      background:blue;
      left:950px;
      top:500px
  }
  
  75% {
      background:green;
      left:0;
      top:800px
  }
  
  100% {
      background:red;
      left:0;
      top:0
  }
  }
  </code></pre>
  
  <p>HTML  </p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/wh8LM/" rel="noreferrer">Here is a fiddle.</a></p>
  
  <p>is it possible to have a line linking them with only css code? and if not would you please help me with a code? </p>