CSS控制動畫遮罩層是頁面美化中常用的一種方式，通過遮罩層可以突出顯示重要信息，同時在不打擾用戶操作的前提下增強用戶體驗。

下面我們介紹如何使用CSS控制動畫遮罩層：

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 遮罩層顏色和透明度 */
z-index: 9999; /* 遮罩層層級，注意不要與其他元素重疊 */
transition: all 0.3s ease; /* 動畫效果 */
opacity: 0; /* 初始透明度為0，即隱藏遮罩層 */
pointer-events: none; /* 禁止用戶點擊遮罩層下方的元素 */
}
.overlay.show {
opacity: 1; /* 當添加show類名時，遮罩層顯示 */
pointer-events: auto; /* 允許用戶點擊遮罩層下方的元素 */
}

在HTML中添加遮罩層元素：

<div class="overlay"></div>

在JavaScript中控制遮罩層的顯示和隱藏：

var overlay = document.querySelector('.overlay');
overlay.classList.add('show'); // 顯示遮罩層
overlay.classList.remove('show'); // 隱藏遮罩層

通過以上的CSS和JavaScript代碼，我們就可以輕松地實現遮罩層的動畫效果，提升頁面的交互體驗。