动画弹跳属性在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中工作的图标，但它在Safari浏览器中不起作用。我还提到了webkit这个属性。

Answer 1

＆＃13;

＆＃13;

    public Form1()
    {
        InitializeComponent();
        txtBscanned.KeyDown += new KeyEventHandler(this.OnKeyDownHandler);
      }

＆＃13;

@-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);
    }
}

＆＃13;

＆＃13;

＆＃13;

我刚刚在关键帧前面添加了-webkit属性，并为firefox浏览器添加了-moz属性。这些代码在chrome，safari和firefox中运行良好。