Почему это значение css неверно?

Question

Я пытаюсь добавить очень базовую c анимацию, и она отлично работает в jsFiddle perfectl, но когда я пытаюсь сделать это в другом проекте - он не работает:

это элемент, который я пытаюсь оживить :

.progress-status.complete {
  width: 100%;
  height: 10px;
  background: red;

  animation: shadow-pulse 4s infinite;
}

@keyframes shadow-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
          -webkit-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
          -moz-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
     }
     100% {
          box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
          -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
          -moz-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
     }
}
@-webkit-keyframes shadow-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
          -webkit-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
          -moz-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
     }
     100% {
          box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
          -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
          -moz-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
     }
}

<div class='progress-status complete'></div>

почему он тормозит в Chrome тогда?