body header.header {
    background-color: transparent;
    transition: background-color .3s ease, box-shadow .3s ease;
    z-index: 9999;
}

@supports (animation-timeline: scroll()) {

    body header.header {
        animation: headerScroll linear both;
        animation-timeline: scroll();
        animation-range: 0 100px;
    }

    @keyframes headerScroll {
        from {
            background-color: transparent;
            box-shadow: none;
        }

        to {
            background-color: #ffffff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
        }
    }
}