照片不显示图像滑块

Question

@keyframes drunk2anim {
0% {
    opacity: 0;
}
17% {
    opacity: 0;
}
33% {
    opacity: 1;
}
50% {
    opacity: 1;
}
67% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}

@keyframes drunk3anim {
0% {
    opacity: 0;
}
17% {
    opacity: 0;
}
33% {
    opacity: 0;
}
50% {
    opacity: 1;
}
67% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}

.drunk1 {
    position: absolute;
    width: 50%;
    top: 150px;
    left: 200px;
}

.drunk2 {
    position: absolute;
    width: 50%;
    top: 150px;
    left: 200px;
    animation: drunk3anim 10s infinite;
}

.drunk3 {
    position: absolute;
    width: 50%;
    top: 150px;
    left: 200px;
    animation: drunk3anim 10s infinite;
}

                <div class="numberone">
                <img class="drunk1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/PEO-drunk.svg/64px-PEO-drunk.svg.png">
            </div>

            <div class="numberone">
                <img class="drunk2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/PEO-drunk.svg/64px-PEO-drunk.svg.png">
            </div>

            <div class="numberthree"> 
                <img class="drunk2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/PEO-drunk.svg/64px-PEO-drunk.svg.png">
            </div>

我只是创建了一个简单的图像滑块，一切似乎与滑块drunk002中没有显示一个图像的事实不同。如果我在css上取走绝对位置，那么所有图像都会显示出来，你可以看到动画是如何工作的，当它们全部堆叠时它们会变成一个没有出现？我做错了什么，谢谢......