动画弹跳属性在 Safari 浏览器中不起作用答案

【问题标题】：Animation Bounce property not working in Safari browser动画弹跳属性在 Safari 浏览器中不起作用
【发布时间】：2016-04-13 17:09:49
【问题描述】：

@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 中运行，但在 safari 浏览器中不起作用。我还提到了 webkit 属性。

【问题讨论】：

我认为您没有发布完整/正确的代码。 HTML 中没有 .services-amenities 元素。是父div吗？
@harry....对不起，我忘了说是的，它是父 div
我认为不再需要前缀，但您是否也尝试过包含@-webkit-keyframes？
我找到了解决方案，看看@Harry

标签： html css animation keyframe

【解决方案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 中运行良好。

【讨论】：