如何淡出图像旋转器？

Question

我有一个无限的图像旋转器。我希望整个过程在几秒钟后消失。我是javascript的新手，但我的各种尝试均以失败告终。我不希望旋转器停止运行，只是在运行时逐渐消失。有人可以帮忙吗？

html：

if (in_array($ip, $ip_range)){ //...

css：

<div class="exploding-faces">
    <img id="twelve" src="img/ba-small.png" />
    <img id="eleven" src="img/bo-small2.png" /> 
    <img id="ten" src="img/ca-small.png" />
    <img id="nine" src="img/ha-small.png" />
    <img id="eight" src="img/ka-small.png" />
    <img id="seven" src="img/ke-small.png" />
    <img id="six" src="img/mi-small.png" />
    <img id="five" src="img/po-small.png" />
    <img id="four" src="img/so-small.png" />
    <img id="three" src="img/to-small.png" />
    <img id="two" src="img/tr-small.png" />
    <img id="one" src="img/wi-small.png" />
</div>

javascript：

.exploding-faces {
    position: absolute;
    left: 42%;
    top: 30vh;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);

}
    .exploding-faces img {
        width: 300px; -webkit-shape-outside:circle();shape-outside:circle(); 
        position: absolute;
        left: 0;
        top: 0;
        cursor: default;
    }