#inv {position:absolute;top:20px;left:20px;width:302px;height:252px;overflow:hidden;perspective:1000px;background:url(../gf0/fix.jpg) no-repeat center center;background-size:cover;font-family:Arial, sans-serif}
#sl1 > div:first-child {position:absolute;width:100%;height:100%;top:25px;left:0;will-change:transform;animation:txtOut 12s linear infinite;animation-delay:2.5s}
@keyframes txtOut {
0%, 61% {transform:translateX(0)}
65.2%, 100% {transform:translateX(-100%)}
}
#sl2, #sl3, #sl5 {position:absolute;left:50%;opacity:0;animation-fill-mode:backwards !important;white-space:nowrap}
#sl1 > div:first-child::before {
content: "";
position:absolute;
left:42.5px;
top:52%;
transform: translateY(-50%) rotateX(90deg);
transform-origin: center center;
width:217px;
height:62px;
background:#00d;
animation:blue 12s linear infinite;
animation-delay:2.5s;
backface-visibility: hidden;
}
@keyframes blue {
0%, 39% {opacity:0;transform: translateY(-50%) rotateX(90deg)}
39.1% {opacity:1;transform: translateY(-50%) rotateX(90deg)}
45%, 100% {opacity:1;transform: translateY(-50%) rotateX(0deg)}
}
#sl5 {
color:#fff;
background:#f00;
font-weight:900;
font-size:30px;
padding:12px 0px;
width: 217px;
box-sizing: border-box;
text-align: center;
top:calc(27% - 30px);
animation:animZero 12s linear infinite;
animation-delay:2.5s;
}
@keyframes animZero {
0% {transform:translate(-50%, -50%) scale(0);opacity:1}
4% {transform:translate(-50%, -50%) scale(1.5);opacity:1}
8% {transform:translate(-50%, -50%) scale(1.0);opacity:1}
14% {transform:translate(-50%, calc(-50% + 30px)) scale(1.0);opacity:1}
19%, 100% {transform:translate(-50%, calc(-50% + 30px)) scale(1);opacity:1}
}
#sl2 {top:50%;font-weight:900;font-size:24px;color:#ff0;animation:invite 12s cubic-bezier(.1, .8, .2, 1) infinite;animation-delay:2.5s}
@keyframes invite {
0%, 39% {opacity:0;transform:translate(-50%, -50%) scale(6) rotate(-360deg)}
45%, 100% {opacity:1;transform:translate(-50%, -50%) scale(1) rotate(0deg)}
}
#sl3 {color:#000;font-size:24px;font-weight:500;top:44%;z-index:9;animation:oddzial 12s linear infinite;animation-delay:2.5s}
@keyframes oddzial {
0%, 8% {opacity:0;transform:translate(-50%, calc(-50% + 28px))}
14%, 35% {opacity:1;transform:translate(-50%, -50%) scaleY(1)}
39%, 100% {opacity:0;transform:translate(-50%, -50%) scaleY(15)}
}
img[data-u='image'] {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:5;transform:translateX(100%);animation:BearIn 12s linear infinite;animation-delay:2.5s}
@keyframes BearIn {
0%, 62.8% {transform:translateX(100%)}
67.0%, 94.8% {transform:translateX(0)}
99.0%, 100% {transform:translateX(-100%)}
}