rotating animation table td error firefox

Wow - I don't understand it.

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 rot1 {
  0% {
transform: rotate(0deg);
//opacity:0;
  }
  
  50% {
transform: rotate(180deg);
//opacity:1;
  }
  
  
  100% {
transform: rotate(359deg);
//opacity:0;
  }
}

@keyframes rot2 {
  0% {
transform: rotate(0deg);
//opacity:0;
  }
  
  50% {
transform: rotate(180deg);
//opacity:1;
  }
  
  
  100% {
transform: rotate(0deg);
//opacity:0;
  }
}



table.links td{
	//border:solid 1px #ff00ff;
	text-align:center;
	width:30px;height:30px;
	}



[class^="tooltip"]{ display: inline;position: relative;}

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);
}


/*
table.links tr:nth-of-type(3n-2)
{
animation: rot2 20s infinite;
transform-origin: 50% 50%;
//border:solid 1px #ffff00;
}
*/

/* --- 1st/4th column --- */
table.links td:nth-child(3n-2)
{
animation: rot2 5s infinite;
transform-origin: 50% 50%;
//border:solid 1px #00ffff;
border:solid 1px #cc0;
}
/*--
tr:nth-child(3n+1)  td{
outline: 1px dotted red;

outline-offset:-5px;
}
--*/


/* ----- rows with outlines -- */
tr{
outline: 1px solid blueviolet;

outline-offset:-12px;
}