анимация изменения слов работает в Chrome, но не в Safari

Question

Я только что пытался настроить на своем веб-сайте простую текстовую анимацию. Обычно каждые несколько секунд я хотел бы, чтобы слова менялись (например, с «graphi c design» на «illustration» и так далее). Анимация отлично работает в Chrome, но не в Safari, где она не воспроизводится. Я пробовал добавить префикс -webkit, но, возможно, проблема в элементе: before? Вы можете проверить веб-сайт по адресу matteobisato.design, а ниже - фрагмент кода

• about /
• работает /
• contact /
• instagram /

matteo bisato

.bigwords {font-size: 4em; семейство шрифтов: Atlas Grotesk Web; font-weight: 400; стиль шрифта: нормальный; font-stretch: нормальный; высота строки: 110%; маржа слева: 40 пикселей; padding-top: 72 пикселя; маржа сверху: 10 пикселей; padding-bottom: 0px; z-индекс: -1; цвет фона: прозрачный; цвет: rgb (0, 0, 0); непрозрачность: 0,5; mix-blend-mode: difference}

        .bigwords:before {content: normal; animation-name: animate; animation-duration: 20s; 
        animation-iteration-count: infinite;}

        @keyframes animate { 
            from {content: 'editorial design.'} 20% {content: 'graphic design.'} 30% {content:'motion graphics.'}
            40% {content: 'visual culture.'} 50% {content: 'moving image.'} 60% {content: 'sound.'} 70% {content: 'branding.'}
            80% {content: 'logo design.'} 90% {content: 'photo editing.'} to {content: 'illustration.'}
        }

есть идеи?

Answer 1

Вы должны указать префиксы поставщиков для всех целевых браузеров.

.bigwords:before {
    content: normal; 
    animation-name: animate; 
    -webkit-animation-name: animate;
    -moz-animation-name: animate;
    animation-duration: 20s;
    -webkit-animation-duration: 20s;
    -moz-animation-duration: 20s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
}