为什么我的css动画没有停留在同一位置？

Question

当我的页面加载时，徽标动画从屏幕的右下角开始，即使我的徽标元素是绝对定位的。我真的不明白为什么会发生这样的事情，又该怎么办。

下面是我的代码：

HTML：

<div class="intro position-relative">
    <header class="company-name border border-5 p-2 p-sm-4 position-absolute start-50 translate-middle">
        <h1 class="lh-1">BAKKES</h1>
        <h2 class="lh-1">herenkappers en baardkwekers</h2>
    </header>
</div>

CSS：

    .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);
        }
    }

这里有一个链接，你可以看到发生了什么：https://amazing-austin-69ee4a.netlify.app/

Answer 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
}