CSS等待動畫，是指我們可以使用CSS代碼創造一種視覺效果，并在等待某些操作的時候顯示出來，以充實頁面內容，同時也為用戶提供更好的用戶體驗。下面將介紹如何使用CSS創建一個簡單而又實用的等待動畫。

/* 等待動畫的CSS代碼 */
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

在上面的代碼中，我們創建了一個類名為“loader”的元素，并進行了一些基本的樣式設置，如設置邊框、圓角、寬高等等。接下來我們使用CSS3中的動畫效果，為這個元素添加了一個名為“spin”的動畫，該動畫可以讓元素旋轉360度，使其看起來像是正在等待。

我們可以使用JavaScript或者jQuery來通過操作CSS類名，以便在執行異步操作時讓等待動畫顯示出來，例如：

// 使用JavaScript
var loader = document.querySelector('.loader');
loader.classList.add('active'); // 顯示等待動畫
loader.classList.remove('active'); // 隱藏等待動畫
// 使用jQuery
$('.some-element').on('click', function() {
$('.loader').addClass('active'); // 顯示等待動畫
$.ajax({
url: 'example.php',
success: function() {
$('.loader').removeClass('active'); // 隱藏等待動畫
}
});
});

當然，這僅僅是一個簡單的例子，您可以根據自己的需求創造出更加炫酷、更加有趣的等待動畫。總之，等待動畫可以為用戶提供更加友好的用戶體驗，也可以增加頁面的充實感。