Почему эта анимация CSS работает только в Safari, если я использую Prefixfree, а не Autoprefixer? - PullRequest
Новая
       35

Почему эта анимация CSS работает только в Safari, если я использую Prefixfree, а не Autoprefixer?

0 голосов
/ 20 февраля 2020

У меня есть эта анимация, которая представляет собой клавиатуру, печатающую текст. После некоторого тестирования я обнаружил, что он не работал в Safari (он выводил бы только несколько пикселей), если только я не использовал Prefixfree для префикса вендора вместо того, чтобы вообще ничего не использовать, или не использовал Autoprefixer.

Почему это так? ? Мне трудно понять, почему Prefixfree исправил проблему, а Autoprefixer - нет.

Вот ручка: https://codepen.io/troyvassalotti/full/GRgVPQw

Вот база CSS: 

html {
    font-size: 10px;
    font-family: 'Quicksand', sans-serif;
    color: #f7f7ff;
    background-color: #011627;
    width: 100%;
}

h1 {
    font-size: 4rem;
}

.typewriter {
    border-right: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

.type-animation__first {
        /* name, duration, number of steps, delay, repetitions */
    animation: typing 1.5s steps(25) 0.5s 1 normal both,
        cursor 500ms steps(25) 5 normal;
}

.type-animation__second {
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
    animation: typing 1.5s steps(25) 3s 1 normal both,
        cursor 500ms steps(25) 2.5s infinite normal;
}

@keyframes typing {
    0% {width: 0;}
    100% {width: 28.7rem;}
}

@keyframes cursor {
    0% {border-right-color: rgb(255,255,255 / .75);}
    100% {border-right-color: transparent;}
}

А вот и HTML: 

<h1 class="typewriter type-animation__first">Hey, I'm Troy...</h1>
<p class="typewriter type-animation__second">...and I make things.</p>

Спасибо!

...