Question

我想设置background-position-x的动画，但是它在我无法删除的CSS中带有background-position: 0 0 !important;。 javascript有没有解决的办法？我看到我的jQuery代码正在执行它的工作，只是css值覆盖了它。

我已经在Google上搜索过，但似乎无法将!important添加到动画函数中。

//编辑。甚至更好，如果我可以用纯CSS做到这一点？？

谢谢！

jQuery(document).ready(function($) {
  $('.section').animate({
    'background-position-x': '100%'
  }, 100000, 'linear');
});

//编辑2。这似乎确实有效：

@-webkit-keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 100% 0px; } 
}

.section {
  -webkit-animation: animatedBackground 200s linear infinite;
  -moz-animation: animatedBackground 200s linear infinite;
  animation: animatedBackground 200s linear infinite; 
}

//编辑3.实际上，看起来FF仍然会用！important覆盖，并在关键帧块内添加！important没有任何作用。有想法吗？谢谢！

Answer 1

这最终为我工作。我还添加了50％使其反弹！

@-webkit-keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  50% {
    background-position: 100% 0px; } 

    to {
    background-position: 0px 0px; }
}

.section {
  -webkit-animation: animatedBackground 200s ease infinite;
  -moz-animation: animatedBackground 200s ease infinite;
  animation: animatedBackground 200s ease infinite; 
}

用animate（）用javascript / jQuery覆盖！important

1 个答案: