Question

我在body元素上运行了一个CSS动画，默认持续时间为20秒。我希望能够通过用户输入进行更改，但我似乎无法使其正常工作。

我的默认CSS是：

body {    
    ...    
    animation: MoveBG 20s ease infinite;
}

如果我运行这个jQuery代码：

$('body').css('animation', 'MoveBG 2s ease infinite');

动画的持续时间仍为20秒。有趣的是，如果我跑：

alert($('body').css('animation-duration'));

它会告诉我动画持续时间是2秒（显然不是）。

// the animation duration should change to 2s, but it still animates at 20s
var animation = 'MoveBG 2s ease infinite';
$('body').css('animation', animation);

// it even says that it is animate at 2s
//alert($('body').css('animation-duration'));

body {
  background: linear-gradient(to right, #f00, #0f0, #00f);
  background-size: 600% 100%;
  -webkit-animation: MoveBG 20s ease infinite;
  -moz-animation: MoveBG 20s ease infinite;
  -o-animation: MoveBG 20s ease infinite;
  animation: MoveBG 20s ease infinite;
}

@-webkit-keyframes MoveBG {
  0% {
    background-position: 0 0
  }
  50% {
    background-position: 100% 0
  }
  100% {
    background-position: 0 0
  }
}

@-moz-keyframes MoveBG {
  0% {
    background-position: 0 0
  }
  50% {
    background-position: 100% 0
  }
  100% {
    background-position: 0 0
  }
}

@-o-keyframes MoveBG {
  0% {
    background-position: 0 0
  }
  50% {
    background-position: 100% 0
  }
  100% {
    background-position: 0 0
  }
}

@keyframes MoveBG {
  0% {
    background-position: 0 0
  }
  50% {
    background-position: 100% 0
  }
  100% {
    background-position: 0 0
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Jsfiddle：http://jsfiddle.net/sdobc5vx/2/

有人能看出我做错了什么吗？

Chrome 37中发生了这种情况 - 但看起来它在Firefox 30中正常运行。嗯......

Answer 1

不完全确定，但即使您覆盖已经启动的关键帧（可能是Chrome错误），看起来框架刷新也不会发生。

一个技巧是隐藏和元素并显示它（异步）以进行重绘（但闪烁不太理想）。

   $('body').css('animation', animation).hide().show(0);
                                                   //^__ Need this to force asyncronous show

＆＃13;

var animation  = 'MoveBG 2s ease infinite';
$('body').css('animation', animation).hide().show(0); 
                                                //^___Asyncronously show

＆＃13;

body {
    background: linear-gradient(to right, #f00, #0f0, #00f);
    background-size: 600% 100%;
    -webkit-animation: MoveBG 20s ease infinite;
    -moz-animation: MoveBG 20s ease infinite;
    -o-animation: MoveBG 20s ease infinite;
    animation: MoveBG 20s ease infinite;
    
}


@-webkit-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

@-moz-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@-o-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@keyframes MoveBG { 
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
</body>

＆＃13;

这是另一个有效的黑客。将动画重置为无，然后再将其重新设置，这实际上并没有闪烁。

var animation  = 'MoveBG 2s ease infinite';
var $body = $('body').css('animation', 'none'); //reset it
setTimeout(function(){
    $body.css('animation', animation); //set it back
});

<强> Demo2

您也可以使用与addClass相同的hack。

Answer 2

修改，更新

尝试（解决方法）

var duration = "2s";
$("body")[0].style.WebkitAnimationDuration = duration;
$("style").detach().hide(function() {
  $("head").prepend(this);
});

$(function() {
var twenty = $(".twenty");
var two = $(".two");
var span = $("span");
    span.prepend("<b>twenty: </b>" 
                + window.getComputedStyle(twenty[0], null).WebkitAnimation 
                + " <b>before</b>" 
                + "<br><b>two: </b>" 
                + window.getComputedStyle(two[0], null).WebkitAnimation 
                + "<b> before</b>");
// the animation duration should change to 2s, but it still animates at 20s
var duration  =  "2s";
// $('body').css('animation', animation);
two[0].style.WebkitAnimationDuration = duration;
$("style").detach().hide(function() {
  $("head").prepend(this);
});
span.append("<br><b>twenty: </b>" 
           + window.getComputedStyle(twenty[0], null).WebkitAnimation 
           + " <b>after</b>" 
           + "<br><b>two: </b>" 
           + window.getComputedStyle(two[0], null).WebkitAnimation 
           + "<b> after</b>");
// it even says that it is animate at 2s
alert(two.css('animation-duration') 
     + "\n" 
     + window.getComputedStyle(two[0], null).webkitAnimationDuration);
});

span {
    font-size : 12px;
    height : 50px !important;
}
div.two {
    margin-left:20px;
}

div {
    display : inline-block;
    position : relative;
    width : 200px;
    height : 400px;
    background: linear-gradient(to right, #f00, #0f0, #00f);
    background-size: 600% 100%;
    -webkit-animation: MoveBG 20s ease infinite;
    -moz-animation: MoveBG 20s ease infinite;
    -o-animation: MoveBG 20s ease infinite;
    animation: MoveBG 20s ease infinite;
}

@-webkit-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

@-moz-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@-o-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@keyframes MoveBG { 
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <span class="animations"></span><br />
    <div class="twenty"></div><div class="two"></div>
</body>

jsfiddle http://jsfiddle.net/sdobc5vx/31/

Answer 3

我在Safari上试过就可以了。 Chrome没有响应任何内容。

尝试这样做，看看是否会有所作为：

$('body').css({
    -webkit-animation: animation,
    -moz-animation: animation,
    -o-animation: animation,
    animation: animation,
});

无法使用jQuery更改主体上的'animation-duration'CSS

3 个答案: