CSS关键帧动画在Safari中不起作用

Posted 2023-02-24

【中文标题】CSS关键帧动画在Safari中不起作用

【英文标题】：CSS keyframes animation not working in Safari

【发布时间】：2016-04-14 08:43:53

【问题描述】：

我为某些元素（图像和按钮）制作了动画，使用不透明度来淡入和淡出。它在所有浏览器上都能完美运行，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; 
    

【参考方案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;

【讨论】：

这解决了！非常感谢。不敢相信我已经用如此简单的解决方案解决了一个问题..！