CSS3 анимация Webkit не работает в Safari - PullRequest
Новая
       27

CSS3 анимация Webkit не работает в Safari

0 голосов
/ 07 ноября 2019

Я пытаюсь сделать анимацию кругового концентрического круга, используя ключевые кадры CSS3, примерно так: - 

.animate-border span:nth-child(1) {
    -webkit-animation-duration: 4.2s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: none;
    -webkit-animation-play-state: running;
    -webkit-animation-name: pulsei;

    animation-duration: 4.2s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: pulsei;
}


@-webkit-keyframes pulsei {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        border: 1.5px solid #b3eaf8;
        opacity: 1;
        width: 5%;
        padding-bottom: 5%;
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 0;
        width: 50%;
        border: 1.5px solid #b3eaf8;
        padding-bottom: 50%;
    }
}

@keyframes pulsei {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        border: 1.5px solid #b3eaf8;
        opacity: 1;
        width: 5%;
        padding-bottom: 5%;
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 0;
        width: 50%;
        border: 1.5px solid #b3eaf8;
        padding-bottom: 50%;
    }
}

Я использовал сокращенные сокращения для анимации, но позже изменил ее на отдельные свойства, но все еще не сделалработай! Что я тут не так делаю?

...