CSS Анимация работает на Chrome, но не на сафари

Question

ниже код работает отлично на Chrome, но не на сафари:

@-webkit-keyframes jiggle { 
    0% { 
     transform: rotate(-.5deg); 
     -webkit-animation-timing-function: ease-in; 
    } 
    50% { 
     transform: rotate(1deg); 
     -webkit-animation-timing-function: ease-out; 
    } 

} 

.animated_container { 
    -webkit-animation-name: jiggle1; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transform-origin: 50% 40%; 
    -webkit-animation-duration: 0.21s; 
    -webkit-animation-delay: -0.43s; 
    animation-name: jiggle1; 
    animation-iteration-count: infinite; 
    transform-origin: 50% 40%; 

} 

Я создал пример в этой скрипке:

Что я упускаю Вот ? Спасибо!

Answer 1

Это потому, что вы не устанавливаете полный диапазон процента трансформации. Для Safari требуется указать 100% конечную точку. См. Этот ответ: CSS3 animation not working in safari

Answer 2

Вы используете webkit.prefix. Вам нужно снова написать код без префикса webkit, чтобы другие браузеры, такие как Safari, Internet Explorer или Firefox, могли использовать его.

@-webkit-keyframes jiggle { 
0% { 
    transform: rotate(-.5deg); 
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; 
} 
50% { 
    transform: rotate(1deg); 
    -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; 
} 

} 

.animated_container { 
    -webkit-animation-name: jiggle1; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transform-origin: 50% 40%; 
    -webkit-animation-duration: 0.21s; 
    -webkit-animation-delay: -0.43s; 
    animation-name: jiggle1; 
    animation-iteration-count: infinite; 
    transform-origin: 50% 40%; 
    animation-duration: 0.21s; 
    animation-delay: -0.43s; 

}