reactjs - 我正在尝试使用 Aos 进行动画处理，但由于某种原因，只有初始值被采用，然后动画直到结束

Question

这是我的 HTML

<section className="about-me">
   <h1 >About me</h1>
   <p data-aos="example" className="introduction">Hello, my name is</p>

这是我的动画 CSS

[data-aos="example"] {
opacity: 1;
transition-property: transform, opacity;

&.aos-animate {
    opacity: 0;
}

@media screen and (min-width: 768px) {
    transform: translateX(100px);

    &.aos-animate {
        transform: translateX(0);
    }
}

}

该元素的不透明度为 0 并且永远不会变为 1。我无法弄清楚为什么这种情况一直发生。谢谢您的帮助