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

我希望它会帮助别人。

css3动画在Safari中不起作用

1 个答案: