@keyframes click-motion {
0%, 100% {
transform: scale(1) translateY(0);
}
30% {
transform: scale(0.9) translateY(4px);
}
60% {
transform: scale(1) translateY(0);
}
}
.click-motion {
animation: click-motion 1.5s infinite;
}
.curtain {
position: fixed;
width: 100%;
height: 100%;
display: flex;
z-index: 9999;
top: 0;
left: 0;
}
.left-curtain, .right-curtain {
width: 50%;
height: 100%;
background-color: #111;
position: relative;
transition: transform 2.5s linear;
display: flex;
align-items: center;
justify-content: center;
}
.left-curtain {
transform: translateX(0);
}
.right-curtain {
transform: translateX(0);
}
.curtain.open .left-curtain {
transform: translateX(-100%);
}
.curtain.open .right-curtain {
transform: translateX(100%);
}
.curtain-content {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}