Question

我遇到了在我正在开发的网页上获取球的跨浏览器动画的问题。

当用户到达网页时，足球开始徘徊。当用户滚动并且足球击中屏幕顶部时，使用Jquery Waypoints，我移除悬停动画并添加旋转，平移动画，以便足球沿着对角线（旋转）向下移动到下一部分。在Firefox中，球完全悬停在Chrome中，球根本不会徘徊。当元素在Chrome中击中页面顶部时，球会旋转并转换，但在Firefox中，球不会旋转并且只能进行翻译。

HTML：

<div id="footy">
<img id="kick" class="object footy float" src="<?php echo drupal_get_path('theme', 'footykids'); ?>/bootstrap/img/footy.png">
</div>

CSS：

.footy {
    z-index: 1999;
    width: 150px;
    height: auto;
}

.drop-punt {
    transform: translate(360px, 360px) rotate(-360deg);
    -webkit-transform: translate(360px, 360px) rotate(-360deg);
    -o-transform: translate(360px, 360px) rotate(-360deg);
    -moz-transform: translate(360px, 360px) rotate(-360deg);
}

.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

.float {
    animation: floating 2s infinite linear;
    -webkit-animation: floating 2s infinite linear;
    -moz-animation: floating 2s infinite linear;
    -ms-animation: floating 2s infinite linear;
    -o-animation: floating 2s infinite linear;
}

@-webkit-keyframes floating{
    0% {
      transform: translate(0px, -10px);
    }
    50% {
      transform: translate(0px, 10px);
    }

    100% {
       transform: translate(0px, -10px);
     }    
}
@-moz-keyframes floating{
    ...
}
@-ms-keyframes floating{
    ...
}
@-o-keyframes floating{
    ...
}
@keyframes floating{
   ...
}

使用Waypoint的JQuery：

( function ($) {
    $( document ).ready( function() {
        $('#kick').waypoint(function() {
            $("#kick").removeClass("float");
            $("#kick").addClass("drop-punt");
        });
    });
});
(jQuery);

Answer 1

可以通过将关键帧更改为：

来修复webkit动画

@-webkit-keyframes floating{
    0% { -webkit-transform: translate(0px, -10px); }
    50% { -webkit-transform: translate(0px, 10px); }
    100% { -webkit-transform: translate(0px, -10px); }    
}

可以通过向关键帧添加旋转来修复Firefox问题：

@-moz-keyframes floating{
    0% { -moz-transform: translate(0px, -10px) rotate(0deg); }
    50% { -moz-transform: translate(0px, 10px) rotate(0deg); }
    100% { -moz-transform: translate(0px, -10px) rotate(0deg); }    
}

Demo fiddle

动画在不同的浏览器中不同

1 个答案: