用两种属性实现遮罩动画
transition在hover和移开的时候都会有渐变动画animation只有在hover的时候有渐变动画，移开图片遮罩层直接消失
<ul class="other-skin"><li><a class="item" href="#"><img src="./img/xiahoudun.jpg" alt=""><div class="mask">匿光决锋者-夏侯惇</div></a></li><li><a class="item" href="#"><img src="./img/ailin.jpg" alt=""><div class="mask">匿光决锋者-夏侯惇</div></a></li><li><a class="item" href="#"><img src="./img/mingshiyin.jpg" alt=""><div class="mask">匿光决锋者-夏侯惇</div> </a></li><li><a class="item" href="#"><img src="./img/baiqi.jpg" alt=""><div class="mask">匿光决锋者-夏侯惇</div></a></li></ul>
用transition实现
设置正常状态opacity为0 opacity:0hover状态opacity为1opacity:1在正常状态设置要改变的值（可以写all代表全部）动画时间 动画 transition:opacity 300ms ease-in
.other-skin .item .mask {display: flex;//透明度为0opacity: 0;background-color: rgba(0, 0, 0, .88);//添加opacity动画 也可以写alltransition: opacity 300ms ease-in;}.other-skin .item:hover .mask {opacity: 1;}
用animation实现
设置正常状态不可见display:none设置动画名与动画过程 @keyframes maskframes{}设置hover状态可见，并且加上动画 display:flex animation:maskframes 300ms ease-in
.other-skin .item .mask {//正常状态不可见display: none;background-color: rgba(0, 0, 0, .88);}@keyframes maskframes {0% {opacity: 0;}100% {opacity: 1;}}.other-skin .item:hover .mask {//在hover状态可见 并且添加maskframes的动画display: flex;animation: maskframes 300ms ease-in-out forwards;}
transition写起来方便一点，但是必须要有事件触发，而且一般是只执行一次
animation写起来麻烦一点，可以重复执行多次
根据具体的需求选择动画属性
