CSS анимация rotate3d не работает в Safari - PullRequest
Новая
       56

CSS анимация rotate3d не работает в Safari

0 голосов
/ 29 сентября 2018

Я не могу заставить эту анимацию работать в Safari 12, что бы я ни пытался.Я пробовал префиксы поставщиков и все, но ничего не работает.

В Chrome работает нормально.У кого-нибудь есть идеи? 

<div class="spinners"></div>

Это CSS: 

@keyframes spinx {
  0% {
    transform: rotate3d(0, 1, 1, 360deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 360deg);
  }
}
.spinners {
  display: block;
  width: 100%;
  height: 4rem;
  overflow: hidden;
  position: relative;
}
.spinners:before, .spinners:after {
  content: "";
  width: 4rem;
  height: 4rem;
  border: 3px solid red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2rem 0 0 -2rem;
  display: block;
  transform-origin: 50% 50% 0;
}
.spinners:before {
  animation: spinx 2s infinite linear;
}
.spinners:after {
  border-color: blue;
  animation: spinx 4s infinite linear alternate;
}

Вот демоверсия: https://codepen.io/Skinner927/pen/vVEdag

1 Ответ

0 голосов
/ 29 сентября 2018

Похоже, что и Safari, и Firefox не распознают изменения между двумя ключевыми кадрами.Для решения этой проблемы вы можете использовать промежуточный ключевой кадр: 

50% {
  transform: rotate3d(0, 1, 1, 180deg);
}

Демо: 

@keyframes spinx {
  0% {
    transform: rotate3d(0, 1, 1, 360deg);
  }
  50% {
    transform: rotate3d(0, 1, 1, 180deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 0);
  }
}

.spinners {
  display: block;
  width: 100%;
  height: 4rem;
  overflow: hidden;
  position: relative;
}

.spinners:before,
.spinners:after {
  content: "";
  width: 4rem;
  height: 4rem;
  border: 3px solid red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2rem 0 0 -2rem;
  display: block;
  transform-origin: 50% 50% 0;
}

.spinners:before {
  animation: spinx 2s infinite linear;
}

.spinners:after {
  border-color: blue;
  animation: spinx 4s infinite linear alternate;
}
<div class="box">
  <div class="spinners"></div>
</div>
...