Как убрать фризы с прелоадера?

<div class="preload">
        <div class="animation">
            <div id="text">Wait a minute.</div>
 </div>

@import url("https://fonts.googleapis.com/css?family=Crimson+Text");
        .preload {
            background: #151515;
            overflow: hidden;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 100000;
        }

        .animation {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #text {
            font-family: 'Crimson Text', serif;
            font-size: 32px;
            letter-spacing: 0.15em;
            font-weight: 600;
            color: #fff;
            animation: text 2s infinite;
            display: block;
        }

        @keyframes text {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
                color: #151515;
                box-shadow: inset 270px 0 0 0 #e0e0e0;
            }
            100% {
                box-shadow: inset -270px 0 0 0 #e0e0e0;
                opacity: 0;
            }

$preloader = $('.preload'),
        $anim= $preloader.find('.animation'),
        $text = $preloader.find('#text');
    $anim.fadeOut('slow');
    $text.fadeOut('slow');
    $preloader.delay(500).fadeOut('slow');