CSS動畫旋轉打斷是一種在旋轉過程中突然打斷并改變方向的效果。這種效果通常運用在網站設計中，使網站頁面更加生動有趣。

@keyframes spin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
0% {
transform: rotate(360deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
.spin-class {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.interrupt-class {
animation-name: spin-reverse;
animation-duration: 2s;
}

在上述代碼中，我們使用了兩個關鍵幀動畫：spin和spin-reverse。spin用于實現元素逆時針旋轉360度，而spin-reverse則用于將元素從360度旋轉到0度。

我們創建了兩個類：spin-class和interrupt-class。spin-class將元素應用spin動畫，使其無限制地逆時針旋轉。interrupt-class將元素應用spin-reverse動畫，使其逆時針旋轉并在旋轉過程中突然改變方向。

為了實現打斷旋轉并改變方向的效果，我們需要使用JavaScript。以下是一個示例代碼：

var element = document.getElementById("my-element");
element.addEventListener("click", function() {
element.classList.toggle("interrupt-class");
});

在這個代碼中，我們為元素添加了一個點擊事件監聽器。當點擊元素時，我們通過toggle()方法來切換interrupt-class類，從而實現打斷旋轉并改變方向的效果。

最后，我們需要記住為不同的瀏覽器添加前綴，例如-webkit-和-o-，以確保瀏覽器兼容性。