Animation, Bounce-Eigenschaft funktioniert nicht in Safari-Browser

@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>

der folgenden Code i geschrieben habe der Code die Animation Bounce-Effekt, um die Symbole zu erhalten, ist in dem Chrome und Firefox funktioniert, aber es funktioniert nicht in der Safari-Browser. Ich habe auch das Webkit erwähnt.

Quelle

2016-04-13 harsh desai

Ich glaube nicht, dass Sie Ihren vollständigen/korrekten Code veröffentlicht haben. In HTML gibt es kein '.services-admenities' Element. Ist es das Elternteil 'div'? – Harry

@harry .... sorry, ich vergesse es zu setzen Ja, es ist Elternteil div –

Ich glaube nicht, dass Präfixe mehr erforderlich sind, aber hast du auch '@ -webkit-keyframes' versucht? – Harry

@-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>

Ich habe soeben die -webkit Eigenschaft vor der Keyframes und auch die -moz-Eigenschaft für den Firefox-Browser hinzugefügt. Dieser Code funktioniert gut in Chrome, Safari und Firefox.

Quelle

2016-04-13 09:09:49

Animation, Bounce-Eigenschaft funktioniert nicht in Safari-Browser

Antwort

Verwandte Themen