CODEWITHSUNDEEP
csscss-animations
MFA86
MFA86

Reputation: 215

why is my css animation not staying in the same place?

When my page is loading, the logo animation starts in the bottom right corner of the screen, even though my logo element is positioned absolute. I really don't understand why this is happening and what to do about it.

Here's my code:

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

Here's a link so you can see what happens: https://amazing-austin-69ee4a.netlify.app/

Upvotes: 0

Views: 138

Answers (1)

en0ndev
en0ndev

Reputation: 692

You can do these codes.

I looked at your website.

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

Upvotes: 1

Related Questions