如何从CSS变换矩阵中计算动画关键帧或时间偏移？

Question

从暂停的动画状态获得的4位转换矩阵是什么关系？

我们可以计算自循环开始以来的毫秒数还是旋转度？

我们还能从getComputedStyle()获得其他参数来告诉我们有关动画的计算状态的详细信息吗？

在第一部分在此处得到回答后，我将其作为新的独立问题发布：Can (endless) CSS keyframe animations be stopped at certain time point or a defined keyframe?

function pause() {
    wrap.classList.add("paused");
    state.value = 'paused at: '+window.getComputedStyle(wrap, null).getPropertyValue("transform");
}

function play() {
    state.value = 'running';
    wrap.classList.remove("paused");
}

.paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

#wrap {
  background-color: yellow;
  position: relative;
  top: 0px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  box-sizing: border-box;
  transition: 700ms linear;
  animation-iteration-count: infinite;
}

#wrap:hover {
  background-color: orange;
}

#mouth {
  background-color: transparent;
  position: absolute;
  border-left: 4px solid black;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  border-radius: 0 0 60px 60px;
  height: 30px;
  width: 60px;
  top: 52px;
  left: 20px;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

#left-eye {
  position: absolute;
  background-color: black;
  border-radius: 50%;
  width: 8px;
  height: 16px;
  box-sizing: border-box;
  left: 30px;
  top: 25px;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

#right-eye {
  position: absolute;
  background-color: black;
  border-radius: 50%;
  width: 8px;
  height: 16px;
  box-sizing: border-box;
  top: 25px;
  right: 30px;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

#wrap {
  animation-duration: 1200ms;
  animation-name: rotateDiv;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotateDiv {
  from {
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Safari */
  transform: rotate(0deg);
  }

  to {
  -ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Safari */
  transform: rotate(360deg);
  }
}

<div id = "wrap" class = "paused">
  <div id = "left-eye">&nbsp;</div>
  <div id = "right-eye">&nbsp;</div>
  <div id = "mouth">&nbsp;</div>
</div>
<input type = "button" value = "start" onClick = "play()">
<input type = "button" value = "stop" onClick = "pause()"><br><br>
state:<br>
<input type = "text" value = "" id = "state" size="85%">