在CSS3中，我們可以使用一個非常有趣的屬性，叫做animation-play-state，來控制元素的動畫播放狀態。該屬性有兩個值：running和paused。當屬性值為running時，表示動畫正在播放，當屬性值為paused時，表示動畫已經暫停。下面我們來看一下如何使用該屬性來實現CSS3動畫中的中間停頓效果。

首先，我們需要在CSS中定義一個動畫，如下所示：

@keyframes myanimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
.box {
animation: myanimation 2s infinite;
}

上面的代碼定義了一個名為“myanimation”的動畫，它會在2秒鐘內不停地重復播放。動畫的內容是使元素在水平方向上移動100像素再移回原來的位置。

接下來，我們需要在CSS中為元素添加一個class，用來控制動畫的播放狀態。如下所示：

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

上面的代碼定義了一個class為“paused”，當元素擁有該class時，動畫會被暫停。

最后，我們可以利用JavaScript來控制元素的中間停頓效果。如下所示：

var box = document.querySelector('.box');
box.addEventListener('click', function() {
if (box.classList.contains('paused')) {
box.classList.remove('paused');
} else {
box.classList.add('paused');
}
});

上面的代碼定義了一個點擊事件的監聽器，當元素被點擊時，如果元素擁有“paused”class，則將其移除，從而繼續播放動畫；否則，給元素添加“paused”class，從而暫停動畫。

通過上述的方法，我們就能夠輕松掌握CSS3動畫中的中間停頓效果了。