Почему моя анимация CSS не работает в Safari 12? - PullRequest
Новая
       69

Почему моя анимация CSS не работает в Safari 12?

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

Название в основном дает это. У меня есть анимация, которая отлично работает в Chrome (80) и Firefox (57), но вообще не работает в Safari (12).

Я ожидаю, что прямая линия по диагонали, слева направо, снизу вверх.

Я пробовал дюжину вариантов моего кода, вот одно: (все варианты, которые я пробовал, прекрасно работают в Chrome и Firefox) 

    #move {
    top:0;
    left:0;
    width: 0;
    height: 5px;
    background: rgb(255, 255, 255);
    position: absolute;
    -webkit-animation-name: mymove;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-transform: rotate(var(--a));
    -webkit-transform-origin: top left;
    -webkit-animation-delay: 1s;
    -moz-animation-name: mymove;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-fill-mode: forwards;
    -moz-transform: rotate(var(--a));
    -moz-transform-origin: top left;
    -moz-animation-delay: 1s;
    -ms-animation-name: mymove;
    -ms-animation-duration: 3s;
    -ms-animation-timing-function: linear;
    -ms-animation-fill-mode: forwards;
    -ms-transform: rotate(var(--a));
    -ms-transform-origin: top left;
    -ms-animation-delay: 1s;
    -o-animation-name: mymove;
    -o-animation-duration: 3s;
    -o-animation-timing-function: linear;
    -o-animation-fill-mode: forwards;
    -o-transform: rotate(var(--a));
    -o-transform-origin: top left;
    -o-animation-delay: 1s;
    animation-name: mymove;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transform: rotate(var(--a));
    transform-origin: top left;
    animation-delay: 1s;
  }



@-webkit-keyframes mymove {
    to {
    width: var(--w);
    /*background-color: rgb(67, 67, 92);*/
    }
    }

@-moz-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}

@-ms-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}

@-o-keyframes mymove {
    to {
    width: var(--w);
    /*background-color: rgb(67, 67, 92);*/
    }
    }

@keyframes mymove {
    to {
    width: var(--w);
    /*background-color: rgb(67, 67, 92);*/
    }
    }

короче: 

#move {
  top:0;
  left:0;
  width: 0;
  height: 5px;
  background: rgb(255, 255, 255);
  position: absolute;
  animation: mymove 3s;
  animation-fill-mode: forwards;
  transform-origin: top left;
  transform: rotate(var(--a));

}

@keyframes mymove {
    to {
    width: var(--w);
    }
    }

HTML: 

<div id="move"></div>

Я пытался рассмотреть:

webkit: Почему моя анимация CSS3 не работает в Chrome или Safari?

Анимация CSS3: не загружается в Safari

Преобразование: вращение не работает в Safari

Разделение сокращенной записи: Анимация CSS3 не работает в Safari

Задержка анимации: CSS3 анимация не работает в Safari

Ничто из того, что я пробовал, похоже, не работает в Safari. Что мне здесь не хватает? Любая помощь будет очень высоко ценится!

...