Animation Bounce property not working in Safari browser - html

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>
the following code i have written to get the animation bounce effect to the icons the code is working in the chrome and firefox but it is not working in the safari browser. i have also mentioned the webkit the property.

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>
i have just added the -webkit property in front of the keyframes, and also added the -moz property for the firefox browser. These code works fine in chrome, safari and firefox.