CSS云反復運動是一種常見的動畫效果，許多網站都使用這個效果來增強頁面的視覺效果。它通過CSS3中的關鍵幀動畫實現，利用簡單的CSS樣式和一些幾何計算來模擬云的移動軌跡。

.cloud {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 60px;
background-color: #fff;
transform-origin: 50% 50%;
border-radius: 60px 60px 0 0;
animation: cloud 10s linear infinite;
}
@keyframes cloud {
0% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translateX(-200%) translateY(20%) scale(1.5);
}
100% {
transform: translateX(0) translateY(-50%) scale(1);
}
}

在這段代碼中，.cloud是一個絕對定位的元素，它有一個固定的寬度和高度，并且被設定在頁面的中心位置。通過transform-origin屬性，我們將云的變換中心設置在正中心，方便我們進行移動和縮放。接下來，我們定義了一個cloud類的關鍵幀動畫animation。這個動畫在10秒鐘內以線性的方式無限循環運行，并且有3個關鍵幀：0%、50%和100%。這三個關鍵幀分別代表了云在運動過程中所處的狀態。

在0%的關鍵幀中，我們將云的初始位置設定為頁面正中心，然后在50%的關鍵幀中，我們將云向左移動200%，同時向下移動20%，并且將云的大小增大到原來的1.5倍。最后，在100%的關鍵幀中，云返回到它的原始狀態。

這樣，我們就可以實現一個簡單的云反復運動的效果。通過修改transform屬性和調整關鍵幀的時間，我們可以創建出更多種類的動畫效果。