title: Table cell with blinking borders
body: <p>I am making a user interface where I need to highlight a cell in a table. I have already used coloring for something else, so I need to use the borders. I have created the css to change the borders to dashed, but that doesn't highlight much. I would like to know if there is any way to animate the borders so that they would flash, or circle (typical dashed border animation). I tried with @keyframes and animation, but failed miserably.</p>
  
  <p>I am happy to do it with javascript do it, but I can't use jQuery or any other framework.</p>
  
  <p>If anyone has any other suggestion for highlighting a cell, that could help too.</p>
  
  <p>A test code I use is this:</p>
  
  <pre><code>&lt;table class="t"&gt;
      &lt;tr&gt;
          &lt;td class="t"&gt;1&lt;/td&gt;
          &lt;td class="t top"&gt;2&lt;/td&gt;
          &lt;td class="t"&gt;3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="t left"&gt;4&lt;/td&gt;
          &lt;td class="t middle"&gt;5&lt;/td&gt;
          &lt;td class="t right"&gt;6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="t"&gt;7&lt;/td&gt;
          &lt;td class="t bottom"&gt;8&lt;/td&gt;
          &lt;td class="t"&gt;9&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;    
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table.t {
      border-collapse: collapse;
      border:1px;
      table-layout:fixed;
  }
  
  td.t {
      border: 1px solid black;
      width: 50px;
  }
  
  td.top {
      border-bottom: 1px dashed black;
  }
  td.left {
      border-right: 1px dashed black;
  }
  td.right {
      border-left: 1px dashed black;
  }
  td.bottom {
      border-top: 1px dashed black;
  }
  td.middle {
      border: 1px dashed black;
  }
  </code></pre>
  
  <p>Jsfiddle available <a href="http://jsfiddle.net/2822m/" rel="nofollow">HERE</a></p>