CSS關鍵幀動畫在Safari中不起作用

Question

我爲某些元素（圖像和按鈕）製作了使用不透明度淡入淡出的動畫。它適用於所有瀏覽器，Safari上除外。當我嘗試在Safari中運行它，我的所有元素有沒有任何動畫，查看100％的不透明度。從按鈕元素

例子：

這裏是我的HTML：

<div id = "ctaButton" class="animate-fadeButton"> 
</div> 

而且我的CSS：

#ctaButton{ 
     position:absolute; 
     margin: auto; 
     left: 26%; 
     top:70%; 
     padding:10px; background: #CCC; 
     background-color: rgba(255,131,15,0.5); 

    } 

@keyframes fadeButton { 
     0% { opacity:0; } 
     25% { opacity:0; } 
     35% { opacity:1; } 
     90% { opacity:1; } 
     100% { opacity:0; } 
     animation-timing-function: linear; 
    } 
    @-o-keyframes fadeButton{ 
     0% { opacity:0; } 
     25% { opacity:0; } 
     35% { opacity:1; } 
     90% { opacity:1; } 
     100% { opacity:0; } 
     animation-timing-function: linear; 
    } 
    @-moz-keyframes fadeButton{ 
     0% { opacity:0; } 
     25% { opacity:0; } 
     35% { opacity:1; } 
     90% { opacity:1; } 
     100% { opacity:0; } 
     animation-timing-function: linear; 
    } 
    @-webkit-keyframes fadeButton{ 
     0% { opacity:0; } 
     25% { opacity:0; } 
     35% { opacity:1; } 
     90% { opacity:1; } 
     100% { opacity:0; } 
     -webkit-animation-timing-function: linear; 
    } 
    .animate-fadeButton { 
     -webkit-animation: fadeButton 15s infinite; 
     -moz-animation: fadeButton 15s infinite; 
     -o-animation: fadeButton 15s infinite; 
     animation: fadeButton 15s infinite; 
    } 

Answer 1

您需要的關鍵幀動畫之前設置動畫的名字和時間，而不是後

CSS

#ctaButton { 
    position: absolute; 
    margin: auto; 
    left: 26%; 
    top: 70%; 
    padding: 10px; 
    background: #CCC; 
    background-color: rgba(255, 131, 15, 0.5); 
} 

.animate-fadeButton { 
    -webkit-animation: fadeButton 15s infinite; 
    -moz-animation: fadeButton 15s infinite; 
    -o-animation: fadeButton 15s infinite; 
    animation: fadeButton 15s infinite; 
} 

@keyframes fadeButton { 
    0% { 
    opacity: 0; 
    } 
    25% { 
    opacity: 0; 
    } 
    35% { 
    opacity: 1; 
    } 
    90% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
    animation-timing-function: linear; 
} 

@-o-keyframes fadeButton { 
    0% { 
    opacity: 0; 
    } 
    25% { 
    opacity: 0; 
    } 
    35% { 
    opacity: 1; 
    } 
    90% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
    animation-timing-function: linear; 
} 

@-moz-keyframes fadeButton { 
    0% { 
    opacity: 0; 
    } 
    25% { 
    opacity: 0; 
    } 
    35% { 
    opacity: 1; 
    } 
    90% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
    animation-timing-function: linear; 
} 

@-webkit-keyframes fadeButton { 
    0% { 
    opacity: 0; 
    } 
    25% { 
    opacity: 0; 
    } 
    35% { 
    opacity: 1; 
    } 
    90% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
    -webkit-animation-timing-function: linear; 
}