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 或任何其他的，因此动画有效。

希望对大家有帮助。