アニメーションバウンスプロパティは、Safariブラウザでは動作しない

Question

@keyframes bounce { 
 

 
    0% { 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    20%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    60%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    40% { 
 
     -webkit-transform: translateY(-20px); 
 
     transform: translateY(-20px); 
 
    } 
 

 
    80% { 
 
     -webkit-transform: translateY(-10px); 
 
     transform: translateY(-10px); 
 
    } 
 
    100%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
} 
 

 
.services-amenities .img-container:hover{ 
 
    -webkit-animation:bounce 0.5s; 
 
    animation: bounce 0.5s; 
 
}

<div class="col-lg-4 col-md-6 col-sm-6 text-center box"> 
 
      <div class="img-container"><span class="icon icon_breakfast"></span></div> 
 
      <div class="text-uppercase">Complimentary Continental Breakfast</div> 
 
     </div> 
 
    

私はコードはChromeとFirefoxで働いているアイコンにアニメーションバウンス効果を得るために書かれているが、それはで動作していない次のコードサファリブラウザ。私もwebkitのプロパティを言及している。

Answer 1

@-webkit-keyframes bounce { 
 

 
    0% { 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    20%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    60%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    40% { 
 
     -webkit-transform: translateY(-20px); 
 
     transform: translateY(-20px); 
 
    } 
 

 
    80% { 
 
     -webkit-transform: translateY(-10px); 
 
     transform: translateY(-10px); 
 
    } 
 
    100%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
} 
 

 
@-moz-keyframes bounce{ 
 

 
    0% { 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    20%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    60%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    40% { 
 
     -webkit-transform: translateY(-20px); 
 
     transform: translateY(-20px); 
 
    } 
 

 
    80% { 
 
     -webkit-transform: translateY(-10px); 
 
     transform: translateY(-10px); 
 
    } 
 
    100%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
}

<section class="services-amenities"> 
 
    <div class="col-lg-4 col-md-6 col-sm-6 text-center box"> 
 
      <div class="img-container"><span class="icon icon_breakfast"></span></div> 
 
      <div class="text-uppercase">Complimentary Continental Breakfast</div> 
 
     </div> 
 
    
 
    </section>

私はちょうどキーフレームの前に-webkitプロパティを追加し、またFirefoxブラウザ用-mozプロパティが追加されました。これらのコードはchrome、safari、firefoxで正常に動作します。