CSS加载动画可以为用户提供良好的等待体验，使得用户在等待页面加载完毕时，不会感到过于单调和乏味。但是，如果CSS加载动画的时机不当，也可能会对用户造成不必要的干扰和烦恼。

那么，何时应该使用CSS加载动画呢？以下是一些常见的CSS加载动画时机。

/* 在页面加载时使用 */
@keyframes loader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
animation: loader 1s infinite linear;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
margin: auto;
}

当页面需要加载一定时间时，可以使用CSS加载动画来提示用户页面正在加载中。比如，在页面加载中显示一个旋转的圆圈并提示“Loading...”，让用户等待的过程变得不那么枯燥。

/* 在表单提交时使用 */
@keyframes submit {
0% { width: 0; }
100% { width: 100%; }
}
.submit {
animation: submit 2s linear;
background-color: #3498db;
color: #fff;
font-size: 20px;
padding: 10px;
border-radius: 6px;
text-align: center;
transition: all 0.3s ease-in-out;
}

在表单提交时使用CSS加载动画，可以让用户知道表单正在提交中，并且可以防止用户进行重复提交。比如，在提交按钮被点击后，按钮会变成灰色并且文字提示“Submitting...”，这时用户就知道表单正在回传数据了。

总之，CSS加载动画在适当的时机使用，可以提高用户体验，避免用户等待的焦虑感。只要根据不同的场景和实际需求，选择合适的加载动画时机，就可以帮助用户更愉快地使用网站或应用。