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瀏覽器的動畫不能正常工作

回答

相關問題