Почему эта анимация преобразования CSS не работает?

Question

Я пытался следовать этому уроку по анимации, и он работал бы в DreamWeaver (хотя предварительный просмотр в реальном времени не такой «живой», как я ожидал, так как он не обновляется немедленно или даже при сохранении, что является своего рода раздражает ... Есть ли намеки на то, как заставить это работать?), но не тогда, когда я открыл его в Chrome или IE. Я смотрел на это, и все говорили, что нужно добавить -webkit- и установить display в inline-block, так как по какой-то причине преобразование не работает иначе, так я и сделал, но все равно не работает: <</p>

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