rotating animation table td error firefox

Wow - I don't understand it.

by Christian Sonne

HTML

<div class="outer">
  <div class="rotate"></div>
</div>
<div class="outer">
  <div class="rotate repaint"></div>
</div>

CSS

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes repaint {
  from {
    outline-color: black;
  }
  to {
    outline-color: red;
  }
}

div.outer {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  outline: 1px solid blueviolet;
  margin: 35px;
}

div.rotate {
  width: 100%;
  height: 100%;
  outline: 1px red solid;
  animation: rotate 5s alternate infinite;
}

div.rotate.repaint {
    animation: rotate 5s alternate infinite, repaint 5s alternate infinite;
}