CSS转换旋转暂停波动

Question

我正试图暂停旋转转型。但是，动画非常不稳定;它没有从它停止的地方起飞。我通过切换课来暂停动画：

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

请参阅附带的代码段。单击文档时，将切换暂停类。注意箭头的抽搐。我希望动画从它停止的地方恢复。

＆＃13;

＆＃13;

document.body.addEventListener("click", function(e){
   Array.prototype.forEach.call(
      document.querySelectorAll('#container>div'),
	function(d){
            d.classList.toggle('pause');
	});                               
});

＆＃13;

#container { 
    position:relative;
    width:400px;
    margin-left:50px;
    height:200px;
    border:1px solid black;  
    overflow: visible;
    
}

#container>div {
    position:absolute;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Green_Arrow_Right.svg/600px-Green_Arrow_Right.svg.png);
    background-size: 100%;
}

#d1 { height:200px; width:200px; top: 0; left:0; animation-duration: 20s; }
#d2 { height:80px; width:80px; top: 0; right: 0; animation-duration: 20s; }
#d3 { height:60px; width:60px; bottom: 0; left: 0; animation-duration: 20s; }
#d4 { height:200px; width:200px; bottom:0; right:0; animation-duration: 20s; }
#d5 { height:100px; width:100px; top: 160px; left: 300px; animation-duration: 20s; }

.cw {
    animation-name: rotate; 
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}

.ccw {
    animation-name: rotateccw; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;  
}

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



@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@keyframes rotateccw {
    from {transform: rotate(360deg);}
    to {transform: rotate(0deg);}
}

＆＃13;

<div id="container">
    <div id="d1" class="cw"></div>
    <div id="d2" class="ccw"></div>
    <div id="d3" class="cw"></div>
    <div id="d4" class="ccw"></div>
    <div id="d5" class="cw"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新：此问题仅在我使用适用于Windows的Chrome 45.0.2454.101 m时显示。 Firefox 41.0.1和IE 11都按预期工作。

更新：Chrome 46.0.2490.71 m已发布。问题仍然存在。