'Is there a conflict rule in css? My fadein keyframes works fine but my slidedown doesn't

Im using react and css. In my css file I create 2 animations:

@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 */
}

here is 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;

My fadein keyframes works fine but my slidedown doesn't. And I don't know why. Is there any conflict css rule ?

cssreactjscss-animations


Solution 1:[1]

If you're calling 2 animations on 1 element you need to separate them with commas, otherwise the last one (fadein) will just take priority as CSS is read from top to bottom, thus resulting in only 1 animation. For the animation properties, just separate them with commas as well:

@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, fadein 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease 0s, ease-in 0s;
  animation-direction: normal;
  /* slidedown 2s ease 0s 1 normal forwards; => This one doesn't work */
  /* fadein 1s ease-in 0s 1 normal forwards; => This one works */
}
<div class="welcome__text">hey there!</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sigurd Mazanti

Related Questions