WebKit FOUC when animation-play-state:paused→running

dabblet.css

/* WebKit FOUC when animation-play-state:paused→running */
/* that’s flash of unanimated content, or the element’s default state */ 

@keyframes runaway {
/* the flash goes to the previous keyframe */
  0% {transform: translate3d(5px,0,0); opacity: 1;}
  25% {transform: translate3d(80px,0,0); opacity: 1;}
  50% {transform: translate3d(155px,0,0); opacity: 1;}
  100% {transform: translate3d(305px,0,0); opacity: 1;}
}
.box {  opacity: 0;
	transform: translate3d(0, -330px,0);
	animation: runaway 2s linear infinite alternate both;
 }
.wrapper:hover .box {animation-play-state: play;}
.box:hover {animation-play-state: paused;}

.wrapper {
  position: relative;
  height: 100%;
  padding: 100px 0 172px;
  background-color: #e9e9e9;
}
.box {
  position: absolute;
  left: 5%;
  width: 9em;
  border: 5px solid #999;
  border-radius: 5px;
  padding: .75em;
  text-align: center;
  background-color: #fff;
}

dabblet.html

<div class="wrapper">
<div class="box">hover me to pause</div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}