Question

.bg-grass{
width: 100%; 
height: 290px; 
background-size: :100%;
background-image: url(../graphic/background/001.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite;
-moz-animation: animatedBackground 20s linear infinite;
-webkit-animation: animatedBackground 20s linear infinite;

}

.grass-speed2{
animation: animatedBackground 5s linear infinite;
-ms-animation: animatedBackground 5s linear infinite;
-moz-animation: animatedBackground 5s linear infinite;
-webkit-animation: animatedBackground 5s linear infinite ;

}

我有两个css类，一个是普通动画，另一个是更快。场景将是在某个时间，草速2级将被添加到bg-grass中以使速度更快。它在Firefox中运行良好，但它不适用于chrome。我不确定为什么。还有一种方法可以让它在速度增加时继续当前的背景位置吗？

编辑1

我忘了添加关键帧css

@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }

}

Answer 1

通过使用动画关键帧可以更好地处理这个问题。不要使用不同的类，尝试使用关键帧中的不同百分比与秒组合。以下是使用top的示例。当然，您可以使用更合适的动画类型替换它（或添加更多）。

@keyframes animatedTop {
    0% {
        top: 0;
    }
    90% {
        top: 5px;
    }
    100% {
        top: 8px;
    } 
}

请记住包含前缀。

/* @-webkit-
   @-moz-
   @-o-
*/

你可以通过使用来调用你的动画。

.myClass {
    animation: animatedTop 15s;
}

Answer 2

请将您的代码上传到某处并进行演示，以便我们找出真正的问题。请注意，请记住在关键帧css之前添加浏览器供应商前缀：

@-webkit-keyframes animatedBackground{...}
@-moz-keyframes animateBackground{...}
@-o-keyframes animateBackground{....}

这可能会解决您的问题。

享受css关键帧动画！

提高动画css3的速度

2 个答案: