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.
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.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
