Using react and css, I have created two animations in my css file:
@keyframes fadein {
0% {
visibility: hidden;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
visibility: visible;
opacity: 1;
}
}
@keyframes slidedown {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(30%);
}
}
.welcome__text {
padding: 3rem;
animation:
/* slidedown 2s ease 0s 1 normal forwards; => This one doesn't work */
/* fadein 1s ease-in 0s 1 normal forwards; => This one works */
}
Below is the code for my react file:
const Home = () => {
return (
<div className='homepage'>
<div className='welcome__text'>
<h1>Welcome</h1>
<h3>to Net's Web Game</h3>
</div>
</div>
)
}
export default Home;
The fadein animation works fine, but the slidedown animation does not. I am unsure of what could be causing this issue. Could there be a conflict with another css rule?