css是否有冲突规则？我的淡入淡出关键帧工作正常，但我的下拉没有

Question

我正在使用 React 和 css。在我的 css 文件中，我创建了 2 个动画：

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

这是我的反应文件：

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;

我的淡入淡出关键帧工作正常，但我的下拉按钮不工作。我不知道为什么。是否有冲突 css 规则？

Answer 1

如果你在 1 个元素上调用 2 个动画，你需要用逗号分隔它们，否则最后一个 (fadein) 将优先，因为 CSS 是从上到下读取的，因此只有 1 个动画。对于动画属性，同样用逗号分隔即可：

@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>

css是否有冲突规则？我的淡入淡出关键帧工作正常，但我的下拉没有

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

css

reactjs

css-animations