KP-C

Kevin Powell - Community•2y ago•

1 reply

Dariusz Jendryczka

Css animation issue

Hi all
I have a small or mabe big problem with animation in cssas you can se in pic. Animation works fine but when i reload page i get exta arrow as in pic.
Here is my css code
.arrow-container {
width: 163px;
height: 163px;
border-radius: 50%;
margin-left: 50px;
background-color: var(--green100);
overflow: hidden;
display: flex;
justify-content: center;
position: relative;
}

.animated-arrow {
width: 54px;
height: 54px;
position: absolute;
animation: slide-diagonal 3.6s infinite;
}

.arrow1 {
animation-delay: 0s;
}

.arrow2 {
animation-delay: 1.8s;
}

@keyframes slide-diagonal {
0% {
top: -30%;
right: -30%;
transform: translate(0, 0);
}
50% {
top: 35%;
right: 35%;
transform: translate( 0, 0 );
}

100% {
top: 130%;
right: 130%;
transform: translate( 0, 0 );
}
}
If any one can help i'll be gre8full.