Chrome / Safari解决方案与动画相结合，可实现转换延迟

Question

我只是试图让图像在悬停时旋转，并在指针离开时将其冻结3秒钟。虽然下面的工作在Firefox，它不在safari或chrome。我的问题：铬/野生动物园是否有任何解决方案，即实现这一目标？

HTML

<div id="cat-container">
        <a href="/"><img class="cat" src="http://www.lovethispic.com/uploaded_images/75864-Space-Cat.jpg" /></a>
</div>

CSS

#cat-container {
  width: 250px;
  height: 250px;
  background: #000;
  margin: 2em;
}

.cat:hover {
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
  -moz-transition: 0s ease-in-out;
  -ms-transition: 0s ease-in-out;
  -o-transition: 0s ease-in-out;
  transition: 0s ease-in-out;
}

.cat {
    width:250px;
    height: 250px;
    display: block;
    margin-right: auto;
    margin-left: auto;
   -moz-transition: .75s ease-in-out 3s;
   -ms-transition: .75s ease-in-out 3s;
   -o-transition: .75s ease-in-out 3s;
    transition: .75s ease-in-out 3s; 
}

@-webkit-keyframes rotating {
  from {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

https://jsfiddle.net/jajxb6cg/