I am facing an issue in Gatsby where I have an element with an initial CSS animation. It works perfectly when the static site loads, but after hydration, it keeps repeating. Is there a way to prevent this from happening?
Below is my styled components code for reference:
const Container = styled.main<{fontSize:number}>`
@keyframes fadeIn {
from {
opacity: 0;
background-position-y: -100px;
}
to {
opacity: 1;
background-position-y: 0px;
}
}
text-align: center;
padding-top: 2em;
min-height: 330px;
box-sizing: content-box;
position: relative;
font-size: ${(props) => props.fontSize + "px"};
background: ${(props) => props.theme.backgroundImage};
background-position-x: center;
background-position-y: -100px;
background-repeat: no-repeat;
background-size: 715px;
${media.mobile`
background-size: 100vw;
`}
opacity: 0;
animation: fadeIn 1s;
-webkit-animation-fill-mode: forwards;
`;
Any suggestions on how to fix this issue would be greatly appreciated.