rotating animation table td error firefox

Wow - I don't understand it.

by Christian Sonne

HTML

<div align=center>
  <table class=links>
    <tr>
      <td>&#x25A0;</td>
      <td>&#x25B0;</td>
      <td>&#x25C0;</td>
      <td>&#x25A1;</td>
      <td>&#x25B1;</td>
    </tr>
    <tr>
      <td>&#x25C1;</td>
      <td>&#x25A2;</td>
      <td>&#x25B2;</td>
      <td>&#x25C2;</td>
      <td>&#x25A3;</td>
    </tr>
    <tr>
      <td>&#x25B3;</td>
      <td>&#x25C3;</td>
      <td>&#x25A4;</td>
      <td>&#x25B4;</td>
      <td>&#x25C4;</td>
    </tr>
    <tr>
      <td>&#x25A5;</td>
      <td>&#x25B5;</td>
      <td>&#x25C5;</td>
      <td>&#x25A6;</td>
      <td>&#x25B6;</td>
    </tr>
    <tr>
      <td>&#x25C6;</td>
      <td>&#x25A7;</td>
      <td>&#x25B7;</td>
      <td>&#x25C7;</td>
      <td>&#x25A8;</td>
    </tr>
    <tr>
      <td>&#x25B8;</td>
      <td>&#x25C8;</td>
      <td>&#x25A9;</td>
      <td>&#x25B9;</td>
      <td>&#x25C9;</td>
    </tr>
  </table>
</div>

CSS

@keyframes rot2 {
  0% {
    transform: rotate(0deg);
    color: black;
  }
  50% {
    transform: rotate(180deg);
    color: red;
  }
  100% {
    transform: rotate(0deg);
    color: black;
  }
}

table.links td {
  text-align: center;
  width: 30px;
  height: 30px;
}

table.links {
  border-spacing: 0px;
}

table.links td {
  margin: 0px;
  padding: 0px;
  text-align: center;
}


/* --- center column --- */

table.links tr:nth-child(3n+2) {
  animation: rot2 30s infinite;
  transform-origin: 50% 50%;
}


/* center column red border */

table.links td:nth-child(n+1) {
  border: solid 1px #ff0000;
}


/* -- 2nd/5th column green -- */

table.links td:nth-child(3n+2) {
  animation: rot2 10s infinite;
  transform-origin: 50% 50%;
  border: solid 1px #00ff00;
  background: rgba(128, 128, 128, 0.3);
}

/* --- 1st/4th column --- */

table.links td:nth-child(3n-2) {
  animation: rot2 5s infinite;
  transform-origin: 50% 50%;
  border: solid 1px #cc0;
}

/* ----- rows with outlines -- */

tr {
  outline: 1px solid blueviolet;
  outline-offset: -12px;
}