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

Question

[Aladdin]

Добавил прелоадер на сайт, чтобы пользователь не видел рендера (понаставил всего что только можно). Но из-за загрузки страницы анимация лагает. А после загрузки пропадает и не понятно что вообще выпало на экран.
Кстати, заметил, что в firefox все намного плавнее. Использовал до этого хром. На других не проверял/

Подготовил демонстрацию
https://codepen.io/MrTabrest/pen/ypQwOG?editors=1010

Сама страницы, на которой прелоадер
214426.selcdn.ru/vitaliy/index.html

spoiler

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

Comments

[pavelkunyavskiy]

Для начала выкинуть jQuery?

[pavelkunyavskiy]

И анимация box-shadow это клиника. Никак ты ничего не сделаешь, будет виснуть.

[Aladdin]

pavelkunyavskiy, чем данный эффект заменить тогда?

[pavelkunyavskiy]

Aladdin, чтоб повторить конкретно прям этот эффект? Понятия не имею. Можно заменить другим прелоадером, который использует анимацию попроще.

[Aladdin]

pavelkunyavskiy, то есть все нужно сделать на чистом js?

[pavelkunyavskiy]

Aladdin, ну почему, я такого не говорил. Я имел ввиду другой CSS animation. Лучше всего анимировать opacity и transform, они самые производительные. Вот и думайте что можно из них соорудить. Я лично тоже в свое время отказался от навороченных прелоадеров именно по причине того, что они тормозят при начальной загрузке страницы, а они как раз должны быть оооочень smooth

[pavelkunyavskiy]

Еще есть SVG, можно попробовать им сделать, если разбераетесь.

[Aladdin]

pavelkunyavskiy, спасибо большое, попробую