<header class="header">
        <span class="cover top"></span>
        <span class="cover left"></span>
        <span class="cover right"></span>
        <span class="cover bottom"></span>
        <div class="col">
            <div class="content">
                <h1 class="heading">modern header design</h1>
                <p class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat laboriosam ullam deleniti nisi eos beatae laborum vitae harum quibusdam suscipit!</p>
            </div>
        </div>
        <div class="col">
            <img src="https://github.com/kunaal438/header-animation/blob/master/svg.png?raw=true" class="svg" alt="">
        </div>
    </header>
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&family=Roboto:wght@300;400;500;700;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background: #ffeb3b;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    overflow: hidden;
}

.header{
    width: 100%;
    height: 100vh;
    position: relative;
    background: #363636;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    transform: scale(0.3) rotate(-5deg);
    animation: full-page 1s 3s forwards 1;
}

.cover{
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background: #212121;
}

.cover.top{
    transform-origin: top;
    clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
    animation: open-top 1s forwards 1;
}

.cover.left{
    transform-origin: left;
    clip-path: polygon(0% 0%, 50% 50%, 0% 100%);
    animation: open-left 1s 2s forwards 1;
}

.cover.bottom{
    transform-origin: bottom;
    clip-path: polygon(0% 100%, 100% 100%, 50% 50%);
    animation: open-top 1s 1s forwards 1;
}

.cover.right{
    transform-origin: right;
    clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
    animation: open-left 1s 2s forwards 1;
}

@keyframes open-top{
    100%{
        transform: rotateX(-150deg);
    }
}

@keyframes open-left{
    100%{
        transform: rotateY(-130deg);
    }
}

@keyframes full-page{
    100%{
        transform: scale(1) rotate(360deg);
    }
}

@keyframes fade-in{
    100%{
        opacity: 1;
    }
}

.col{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff9c4;
    opacity: 0;
    animation: fade-in 1s 4s forwards 1;
}

.svg{
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.heading{
    font-family: 'dosis';
    font-size: 100px;
    text-transform: capitalize;
}

.info{
    margin-top: 40px;
    font-family: roboto, sans-serif;
    font-size: 20px;
    line-height: 30px;
}

@media (max-width: 1000px){
    body::after{
        content: 'see it in 0.5x scale';
        position: absolute;
        top: 0;
        left: 0;
        font-family: roboto, sans-serif;
        font-size: 30px;
        width: 100%;
        height: 100%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.