CSS遮罩層動畫是網頁中常用的一種交互效果，它可以將一個元素遮蓋住并添加動畫效果，讓用戶產生一種交互感。下面我們來看一下CSS遮罩層動畫的制作步驟。

//HTML結構
<div class="mask">
<img src="image.jpg">
<div class="overlay"></div>
</div>
//CSS樣式
.mask{
position:relative;
width:300px;
height:200px;
}
.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
opacity:0;
transition:opacity 0.5s;
}
.mask:hover .overlay{
opacity:1;
}

首先，我們在HTML中添加一個div作為遮罩層的容器，并在其中添加需要遮蓋的元素。在容器的內部添加一個div作為遮罩層，并設置其樣式。在CSS樣式中，通過設置.overlay的position為absolute，將其定位到容器的左上角，然后將其寬度和高度都設置為100%，鋪滿整個容器。同時，設置其背景色為半透明的黑色，并將其初始的opacity設置為0，即遮罩層默認不可見。

在容器的hover狀態下，我們將.overlay的opacity屬性改為1，讓遮罩層漸變出現。同時，設置transition屬性為0.5s，讓遮罩層出現時有一個過渡效果。

以上就是CSS遮罩層動畫的制作步驟。除此之外，我們還可以通過修改遮罩層的背景色、透明度以及動畫時長等來實現更加豐富的交互效果。