0

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

当用户到达网页时，足球开始悬停。当用户滚动并且足球击中屏幕顶部时，使用 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{
   ...
}

使用航点的 JQuery：

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

1 回答 1

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

于 2013-09-12T07:52:14.637 回答