Webkitアニメーションはクロムで問題なく動作しますが、サファリでは動作しません

Question

パルスアニメーションを作成しようとしています。これまでのところクロムでうまく動作しますが、Safariでは何もしません。

#cogFlower:hover 
{ 
    -webkit-animation-name: pulse; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
} 

@-webkit-keyframes pulse { 
    0% { -webkit-transform:rotate(0deg);} 
    25% { -webkit-transform:rotate(90deg);} 
    50% { -webkit-transform:rotate(180deg);} 
    75% { -webkit-transform:rotate(270deg);} 
    } 

あなたは私がやっているのデモを見たい場合は、あなたがここでそれを見ることができます： http://www.thestoicsband.com/

ログインの詳細は、次のとおりです。 ユーザー名：ゲスト、パスワード：guest123

ご協力いただきありがとうございます。

乾杯あり

Answer 1

非常に奇妙です。キーフレームの最後にtoを追加すると、アニメーションがSafariで機能するようです。

@-webkit-keyframes pulse { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 
    25% { 
     -webkit-transform: rotate(90deg); 
    } 
    50% { 
     -webkit-transform: rotate(180deg); 
    } 
    75% { 
     -webkit-transform: rotate(270deg); 
    } 
    to { 
     -webkit-transform: rotate(360deg); 
    } 
} 

これが役に立ちます。あなたは、キーフレームを使用している

Answer 2

とき、あなたは少なくとも0%と100%キーフレームを含める必要があります。だから、単純にこのようなあなたのCSSを変更することによってこの問題を解決することができます。また、fromとtoキーワードは、開始と終了のパーセンテージの代わりに使用することができ

@-webkit-keyframes pulse { 
    0% { -webkit-transform:rotate(0deg);} 
    25% { -webkit-transform:rotate(90deg);} 
    50% { -webkit-transform:rotate(180deg);} 
    75% { -webkit-transform:rotate(270deg);} 
    100% { -webkit-transform:rotate(270deg);} 
} 

を：

@-webkit-keyframes pulse { 
    from { -webkit-transform:rotate(0deg);} 
    25% { -webkit-transform:rotate(90deg);} 
    50% { -webkit-transform:rotate(180deg);} 
    75% { -webkit-transform:rotate(270deg);} 
    to { -webkit-transform:rotate(270deg);} 
}