CSS3 анимация не работает в Safari

Question

CSS3 анимации не работает для меня в Safari (хорошо работает в других браузерах), я пытался расщеплением из стенографии так каждое свойство объявляется отдельно, например:

-webkit-animation-name: glow; 
-webkit-animation-duration: 2s; 

.. ....

Но все еще не работает. Есть идеи?

.light:after { 
    content:''; 
    display:block; 
    z-index:1; 
    border-radius: 50%; 
    width: 15px; 
    height: 15px; 
    position:absolute; 
    cursor:pointer; 
    background:rgba(64, 61, 51, 1); 
    -webkit-transition: all 500ms ease-in-out 0s; 
    -moz-transition: all 500ms ease-in-out 0s; 
    -o-transition: all 500ms ease-in-out 0s; 
    transition:all 500ms ease-in-out 0s; 
} 
.light.turned-on:after { 
    content:''; 
    display:block; 
    z-index:1; 
    background:rgba(255, 242, 204, 1); 
    -webkit-transition: all 500ms ease-in-out 0s; 
    -moz-transition: all 500ms ease-in-out 0s; 
    -o-transition: all 500ms ease-in-out 0s; 
    transition:all 500ms ease-in-out 0s; 
} 
.game-area.won .light:after { 
    -webkit-animation-name: glow; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: forwards; 
    -moz-animation: glow 2s ease-in-out infinite alternate; 
    -o-animation: glow 2s ease-in-out infinite alternate; 
    animation: glow 2s ease-in-out infinite alternate; 
} 
@-webkit-keyframes glow { 
    0% { 
     background: #FFF2CC; 
    } 
    10% { 
     background: #FFF2CC; 
    } 
    30% { 
     background: #C58FCC; 
    } 
    50% { 
     background: #AE86B2; 
    } 
    70% { 
     background: #B2A57D; 
    } 
    90% { 
     background: #B2FFEB; 
    } 
    100% { 
     background: #B2FFEB; 
    } 
} 

Answer 1

Просто понял, что в Safari 8.0.7 (10600.7.5) вы не можете использовать animation на display: inline элементов. С display - inline-block или любые другие анимационные работы.

Надеюсь, это поможет кому-то.