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.
} If any one can help i'll be gre8full.
1 Reply
You would really need to set up a codepen (or similar) with both the HTML and CSS (and, I suspect, JavaScript) so that somebody can help you.
That said, it is very unlikely that the CSS alone will be generating extra content. In reality the only ways to add content to the page is via the "content" attribute of a pseudo element or via a background attachment. In the CSS you have provided you aren't doing either of those so it is unlikely to be the cause.