CSS ana karesi animasyonu Safari'de çalışmayan animasyon

Question

Bazı öğeler (resimler ve düğmeler) için opaklığı kullanarak içeri ve dışarı çıkması için bir animasyon yaptım. Safari dışındaki tüm tarayıcılarda mükemmel çalışır. Ben Safari'de çalıştırmayı denediğinizde, tüm unsurları görmek için herhangi bir animasyon olmadan% 100 opaklık .. düğme öğesinden

Örnek sahiptir:

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

Ve: İşte

benim HTML'dir benim 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

Sen ana kareler animasyon önce animasyon adını ve zamanlamasını ayarlamak ve

sonra gerek

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