​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
table.animated {
5
  width: 200px;
6
  font: sans-serif;
7
  border: 1px solid yellowgreen;
8
  animation: myAnimation 1s ease 1s 5 alternate forwards;
9
}
10
​
11
table.animated th,
12
table.animated td {
13
  border: 1px solid yellowgreen;
14
}
15
@keyframes myAnimation {
16
  100% {
17
    border-spacing: 20px;
18
  }
19
}
20
</style>
21
​
22
​
23
<table class="animated">
24
 <tr>
25
  <th>Table Header 1</th>
26
  <th>Table Header 2</th>
27
 </tr>
28
 <tr>
29
  <td>Cell 1</td>
30
  <td>Cell 2</td>
31
 </tr>
32
 <tr>
33
  <td>Cell 3</td>
34
  <td>Cell 4</td>
35
 </tr>
36
</table>