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）你不能display: inline元素使用animation。由于display是inline-block或任何其他动画作品。

我希望它能帮助别人。