转换属性无法正常工作

Question

我正在尝试实现navbar，这样在向下滚动时，它会向上翻转，反之亦然。

我正在使用React + gatsbyjs和styled-components进行样式设计。 我也使用react-animations在8s后向下动画导航栏。

import { fadeInDown } from react-animation;
const fadeInAnimation = keyframes`${fadeInDown}`;

以下是导航栏的CSS：

const FadeInDiv = styled.nav`
    font-family: 'Roboto', sans-serif;
    position: fixed;
    width: 100vw;
    font-size: 1em;
    transform: translateY(-100px);
    animation-duration: 2s;
    animation-delay: 8s;
    animation-fill-mode: forwards;
    animation-name: ${fadeInAnimation};

    @media (min-width: 1400px) {
        font-size: 16px;
    }
`;

之后，我使用chrome dev-tool来改变导航栏的样式，尝试使用transform实现它。

transform: translateY(-20px);

但是，它根本不会影响导航。有什么理由吗？