Анимация CSS в Safari

Question

Я настроил анимацию для логотипа, который появится в навигации на новом сайте. Анимация имеет три части SVG и оживляет каждый на своем месте. Однако на устройствах Safari и iOS на логотипе отсутствует центральная часть.

Я использовал Animate.css для этих основных анимаций и не могу узнать, что отличается от средней части. Код анимации:

@-webkit-keyframes fadeInDown { 
     0% { 
opacity: 0; 
-webkit-transform: translate3d(0, -100%, 0); 
     transform: translate3d(0, -100%, 0); 
} 

100% { 
opacity: 1; 
-webkit-transform: none; 
     transform: none; 
} 
    } 

@keyframes fadeInDown { 
0% { 
opacity: 0; 
-webkit-transform: translate3d(0, -100%, 0); 
     transform: translate3d(0, -100%, 0); 
} 

100% { 
opacity: 1; 
-webkit-transform: none; 
     transform: none; 
} 
} 

.fadeInDown { 
-webkit-animation-name: fadeInDown; 
     animation-name: fadeInDown; 
} 

Он отлично работает на Chrome. Пример анимации Animate.css отлично работает в Safari. Любая помощь будет очень оценена. Здесь показан живой пример: http://codepen.io/bubblegoth/pen/MYvXBp

Answer 1

Проблема в том, что анимация не работает, и поэтому вы не видите centerpart. Просто добавьте display: inline-block; в .armdelay и .centerpart и все работает отлично.

В браузерах на основе webkit (Safari) -webkit-transform игнорируется на встроенных элементах.

https://www.webkit.org/blog/130/css-transforms/