Почему анимация ключевых кадров не работает в сафари

Question

Итак, я работаю над галереей для моей страницы, и мне нужна анимация. То, что я хочу, это для изображений до go от радиуса границы 50% до 0%. Это прекрасно работает в chrome, но я не могу заставить его работать на сафари. Вот это CSS:

.bild {
  text-align: center;
  overflow: hidden;
  position: relative;
  height: 95%;
  width: 95%;
  -webkit-animation-name: out;
  -webkit-animation-duration: .9s;
  border-radius: 50%;
}

.bild:hover{
  -webkit-animation-name: in;
  -webkit-animation-duration: .9s;
  border-radius: 0;
}

@-webkit-keyframes in {
  0% {border-radius: 50%;}
  100% {border-radius: 0%;}
}

@-webkit-keyframes out {
  0% {border-radius: 0%;}
  100% {border-radius: 50%;}
}

Answer 1

Вы должны попробовать с CSS mixins. Разные браузеры требуют разные префиксы для некоторых стилей:

-webkit-animation-duration: $duration;
-moz-animation-duration:    $duration;
-ms-animation-duration:     $duration;
-o-animation-duration:      $duration;
animation-duration:         $duration;

-webkit-animation-name: $animation-name;
-moz-animation-name:    $animation-name;
-ms-animation-name:     $animation-name;
-o-animation-name:      $animation-name;
animation-name:         $animation-name;

@-webkit-keyframes in {
    0% {border-radius: 50%;}
  100% {border-radius: 0%;}
}

@-moz-keyframes in {
    0% {border-radius: 50%;}
  100% {border-radius: 0%;}
}

@-ms-keyframes in {
    0% {border-radius: 50%;}
  100% {border-radius: 0%;}
}

@-o-keyframes in {
    0% {border-radius: 50%;}
  100% {border-radius: 0%;}
}

@keyframes in {
    0% {border-radius: 50%;}
  100% {border-radius: 0%;}
}

Обратите внимание, что вам также нужны ключевые кадры для 'out' имя-анимации в вашем случае.

Если это не поможет, предоставьте HTML код или создайте Codepen, чтобы мы могли видеть весь код изолированным.