Ошибка Safari CSS: направление вращения анимации Неверно?

Question

Я пишу пользовательскую анимацию для проекта, над которым я работаю. Идея состоит в том, что анимация должна напоминать восклицательный знак, который перестает отходить от базовой линии, качаясь на мгновение, а затем полностью отваливается от базовой линии.

По какой-то причине только Safari (OSX и iOS) отказывается отображать первый ключевой кадр анимации по часовой стрелке в анимации CSS, которую я создал. Вместо этого он отображает ключевой кадр как анимацию против часовой стрелки, но затем отлично работает для следующих ключевых кадров анимации.

Рабочий CodePen пример: http://codepen.io/michaelmarcialis/pen/obPYPO

@keyframes unhinged { 
    0% { 
    transform: rotate(0deg); 
    } 
    15% { 
    transform: rotate(240deg); 
    } 
    30% { 
    transform: rotate(125deg); 
    } 
    45% { 
    transform: rotate(220deg); 
    } 
    60% { 
    transform: rotate(145deg); 
    } 
    75% { 
    opacity: 1; 
    transform: rotate(200deg); 
    } 
    90% { 
    opacity: 0; 
    transform: translate(-0.5rem, 8.57142857142857rem) rotate(215deg); 
    } 
    95% { 
    opacity: 0; 
    transform: translate(0) rotate(0deg); 
    } 
    100% { 
    opacity: 1; 
    transform: rotate(0deg); 
    } 
} 

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

Кто-нибудь знает средство для этого?

Answer 1

Проблема заключается в том, что если вы попытаетесь анимировать поворот в сафари более чем на 180 градусов, вместо этого он будет вращаться в другую сторону. Поэтому, если вы попытаетесь повернуть +270 градусов, Safari будет анимировать поворот на -90 градусов.

Обходной путь для Safari не должен вращаться более чем на 179 в любом направлении, а затем завершить остальные вращения в другом сегменте.