CSS-анимация с масштабированием масштабирования не работает в Chrome, Safari и IE, но работает в FF

Question

Несмотря на префиксы, я не знаю, почему transform: scale не работает в Chrome, Safari, IE, но работает только в Firefox. Может ли кто-нибудь указать, как исправить эту проблему? Может быть, изменение ширины и высоты в ключевых кадрах - лучший вариант?

Проверить этот короткий CSS ниже линии 109:

.icon-elements p.wizjer { 
    background: black; 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    position: absolute; 
    margin-top: 108px; 
    margin-left: 109px; 
    z-index: 97; 
    display: block; 
    border: 1px solid gray; 
    border-radius: 50%; 
-webkit-box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1); 
    box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1); 


    -webkit-animation-name: ap-wizjer; 
    -moz-animation-name: ap-wizjer; 
    -ms-animation-name: ap-wizjer; 
    animation-name: ap-wizjer; 
    animation-duration: 7s; 

    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -ms-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 


    @-webkit-keyframes ap-wizjer { 

     0% { 

      -webkit-transform: scale(1, 1); 

      transform: scale(1, 1); 

     } 

     50% { 

      -webkit-transform: scale(1.3, 1.3); 

      transform: scale(1.3, 1.3); 

     } 

     100% { 

      -webkit-transform: scale(1, 1); 

      transform: scale(1, 1); 

     } 

    } 

jsFiddle

Thx.

Answer 1

Вам просто нужно добавить префикс поставщика для продолжительности анимации -webkit-animation-duration: 7s; . Надеюсь, это поможет :)