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; 
}