* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.icons_animation-wrap {
position: relative;
margin-top: 100px;
height: 230px;
width: 100%;
margin-inline: auto;
overflow: clip;
border: 1px solid red;
display: flex;
justify-content: center;
}
.icons_animation-wrap svg {
width: 940px !important;
height: 600px;
margin-inline: auto;
}
.icons_animation-wrap {
position: absolute;
width: 100%;
inset: 0;
}
.logo-wrap {
position: absolute;
top: 0px;
left: 0;
width: 50px;
height: 50px;
transform: translateX(0%) translateY(-70%);
offset-path: path(
"M600 49.5C765.615 49.5 915.528 87.4294 1024.02 148.727C1132.52 210.032 1199.5 294.648 1199.5 388C1199.5 481.352 1132.52 565.968 1024.02 627.273C915.528 688.571 765.615 726.5 600 726.5C434.385 726.5 284.472 688.571 175.981 627.273C67.4759 565.968 0.5 481.352 0.5 388C0.5 294.648 67.4759 210.032 175.981 148.727C284.472 87.4294 434.385 49.5 600 49.5Z"
);
will-change: offset-path, transform;
/* bottom: 0; */
offset-distance: 23%;
/* animation: moveLogo 10s linear forwards infinite; */
}
.logo-wrap.one {
animation-delay: -1.5s;
}
.logo-wrap.two {
animation-delay: -3.5s;
}
@keyframes moveLogo {
0% {
offset-distance: -23%;
filter: blur(4px);
opacity: 0;
}
30% {
filter: blur(0px);
opacity: 1;
}
50% {
/* offset-distance: -14%; */
transform: translateY(-60%);
}
75% {
/* offset-distance: -9%; */
transform: translateY(-40%);
}
100% {
offset-distance: -5%;
transform: translateY(-20%);
}
}
/* */
/*
*/
/*
*/