我做了一个动画为一些元素（图像和按钮）淡入淡出使用不透明度。除了Safari之外，它在所有浏览器上都能完美地工作。当我尝试在Safari中运行它时，我的所有元素都有100%的不透明度，没有任何动画可以看到…

来自button元素的示例：

以下是我的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; 
    }