var keyframer = new CSSKeyframer();

keyframer.register("spin", [
  { transform: "rotate(0deg)", borderRadius: "0" },
  { transform: "rotate(72deg)", borderRadius: "50%" },
  { transform: "rotate(144deg)", borderRadius: "0" },
  { transform: "rotate(216deg)", borderRadius: "50%" },
  { transform: "rotate(360deg)", borderRadius: "0" }
]);

keyframer.register("colors", [
  { backgroundColor: "#e53935" },
  { backgroundColor: "#ad1457" },
  { backgroundColor: "#3f51b5" },
  { backgroundColor: "#0097a7" },
  { backgroundColor: "#00897b" },
  { backgroundColor: "#7cb342" },
  { backgroundColor: "#ffeb3b" },
  { backgroundColor: "#ff9800" },
  { backgroundColor: "#ff5722" }
]);

document.querySelector(".element").style[keyframer.animationProp.js] = "spin 1500ms linear infinite";
document.querySelector(".element__inner").style[keyframer.animationProp.js] = "colors 4000ms linear infinite";

<!-- Following style tag will be added in the head. -->
<style type="text/css" data-keyframes="spin">@keyframes spin{0%{transform: rotate(0deg);border-radius: 0;}25%{transform: rotate(72deg);border-radius: 50%;}50%{transform: rotate(144deg);border-radius: 0;}75%{transform: rotate(216deg);border-radius: 50%;}100%{transform: rotate(360deg);border-radius: 0;}}</style>
<style type="text/css" data-keyframes="colors">@keyframes colors{0%{background-color: #e53935;}12.5%{background-color: #ad1457;}25%{background-color: #3f51b5;}37.5%{background-color: #0097a7;}50%{background-color: #00897b;}62.5%{background-color: #7cb342;}75%{background-color: #ffeb3b;}87.5%{background-color: #ff9800;}100%{background-color: #ff5722;}}</style>

<div class="element">
  <div class="element__inner"></div>
</div>

.element {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
}

.element__inner {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}