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或任何其他動畫作品。

我希望它能幫助別人。