为什么这个css变换动画不起作用？

Question

我试图跟随这个动画教程，它可以在DreamWeaver中工作（现场预览不是＆＃34;现场＆＃34;正如我预期的那样，因为它没有立即更新甚至在保存上有点烦人...有关如何使其工作的任何提示？）但不是我在Chrome或IE中打开它时。我正在调查它，并且每个人都一直在说添加-webkit-并将显示设置为内联块，因为由于某些原因，转换不起作用，所以我做了，但它仍然无法工作：＆lt;

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