Safari浏览器的动画不能正常工作

我有以下CSS规则Safari浏览器的动画不能正常工作

*.highlight { 
      @-webkit-keyframes blink { 
       0% { 
        outline: 5px solid rgba(0, 0, 0, 0); 
       } 

       50% { 
        outline: 5px solid red; 
       } 

       100% { 
        outline: 5px solid rgba(0, 0, 0, 0);  
       } 
      } 

      @keyframes blink { 
       0% { 
        outline: 5px solid rgba(0, 0, 0, 0); 
       } 

       50% { 
        outline: 5px solid red; 
       } 

       100% { 
        outline: 5px solid rgba(0, 0, 0, 0);  
       } 
      } 

      animation: blink normal 1.5s infinite ease-in-out; 

      -webkit-animation-name: blink; 
      -webkit-animation-duration: 1.5s; 
      -webkit-animation-iteration-count: infinite; 
      -webkit-animation-timing-function: ease-in-out; 

      box-sizing: border-box; 
     }

这在所有的浏览器，做工精细，除了Safari浏览器。我搜索了Google，并发现了所有类似的答案都是围绕着转换进行的，我没有使用（至少这里有）任何人都可以帮忙吗？

来源

2017-05-04 DrogoNevets

东西有用吗？如果你的答案有效，我会把它标记为这样。不幸的是它没有任何变化 – DrogoNevets

寻求帮助的问题（“**为什么不是，或如何使这个代码工作？”）必须包含所需的行为，特定的问题或错误以及必要的最短代码来重现它* *在问题本身**。没有**明确问题陈述**的问题对其他读者没有用处。请参阅：[如何创建最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。 – LGSon

感谢@Joseph Silber先前在前一个答案中的回答我设法简单地通过改变轮廓颜色而不是整个轮廓来实现它（见下文）。

@-webkit-keyframes blink { 
    0% { 
     outline-color: transparent; 
    } 

    50% { 
     outline-color: red; 
    } 

    100% { 
     outline-color: transparent; 
    } 
} 

@keyframes blink { 
    0% { 
     outline-color: transparent; 
    } 

    50% { 
     outline-color: red; 
    } 

    100% { 
     outline-color: transparent; 
    } 
} 

*.highlight { 
    animation: blink normal 1.5s infinite ease-in-out; 

    -webkit-animation-name: blink; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 

    outline: 5px solid red; 

    box-sizing: border-box; 
}

来源

2017-05-18 15:10:37 DrogoNevets

Safari浏览器的动画不能正常工作

回答

相关问题