为什么我的css动画不在同一个地方？

加载页面时，徽标动画从屏幕右下角开始，即使我的徽标元素处于绝对位置。我真的不明白为什么会发生这种情况，以及该怎么办

这是我的密码：

HTML:

---

这里有一个链接，您可以看到发生了什么：

您可以执行这些代码

我看了你的网站

.intro .company-name {

top:45%; // remove this

}

.start-50 {
    left: 50% !important; // remove this
}
.translate-middle {
    -webkit-transform: translate(-50%, -50%) !important; // remove this
    transform: translate(-50%, -50%) !important; // remove this
}

.intro {
    display: flex; // add this
    justify-content: center; // add this
    align-items: center; // add this
}

---

我认为你的库（我猜是引导库）给你带来了一些麻烦。是的，很明显它可以与flexbox一起工作，尽管我仍然不明白为什么它不能与position一起工作。无论如何，非常感谢！

    .company-name {
        top: 45%;
        animation: fade-names 1s linear forwards;
        animation-delay: 0.5s;
        opacity: 0;
    }

    @keyframes fade-names {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

.intro .company-name {

top:45%; // remove this

}

.start-50 {
    left: 50% !important; // remove this
}
.translate-middle {
    -webkit-transform: translate(-50%, -50%) !important; // remove this
    transform: translate(-50%, -50%) !important; // remove this
}

.intro {
    display: flex; // add this
    justify-content: center; // add this
    align-items: center; // add this
}