为什么这个css转换动画不是'；不行吗？

我试着跟随这个动画教程，它会在DreamWeaver中工作（虽然实时预览不像我预期的那样“实时”，因为它不会立即更新，甚至在保存时也不会更新，这有点烦人……有没有关于如何使它工作的提示？）但当我在Chrome或IE中打开它的时候，我正在查看它，每个人都说要添加-webkit-并将显示设置为内联块，因为出于某种原因，转换在其他情况下不起作用，所以我做了，但它仍然不起作用：12秒延迟对你不起作用？好吧，我是个白痴：我。。。让它倒转%\。。。非常感谢。Np，发生。：）

div {
  width: 100px;
  height: 100px;
  background-color: coral;
  display: inline-block;
  animation: square-to-circle 2s 12s infinite alternate;
}

@-webkit-keyframes square-to-circle {
  0% {
      border-radius: 0 0 0 0;
      background: coral;
      transform: rotate(0deg);
    }
  25% {
      border-radius: 100% 0 0 0;
      background: darksalmon;
      transform: rotate(45deg);
    }
  50% {
      border-radius: 100% 100% 0 0;
      background: indianred;
      transform: rotate(90deg);
    }
  75% {
      border-radius: 100% 100% 100% 0;
      background: lightcoral;
      transform: rotate(135deg);
    }
  100% {
      border-radius: 100%;
      background: darksalmon;
      transform: rotate(180deg);
    }
}