Question

我有一个简单的关键帧动画，它会生成一个点并将背景转换为蓝色。如何动态改变这种背景颜色？

@keyframes growDot {  
    100% {
        background-color: #23b7e5;
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
}

显然，像$('keyframes growDot').css("background-color", "#FF00B0");这样的东西不起作用。

Answer 1

您无法使用jQuery定位/修改CSS类。但是，您可以添加一个覆盖现有类的新类。

$("[your selector]").addClass("[class that overrides growDot");

话虽如此，这种做法似乎有点过时了。正如其他人所建议的那样，最好改变div本身的背景，与.growDot类无关。

Answer 2

您应该更改动画div的背景，而不是更改关键帧的背景。

Answer 3

我建议使用css transition来做这样的事情。

如果您需要中止动画或在动画之间进行混合，它们会更加强大。动画完成后也不会“保留”指定的值。

（参见代码片段，动画部分将在完成后剪切为原始颜色。如果您在中途切换动画，则新动画将从原始颜色开始）

document.getElementById('b1').addEventListener('click', function(){
  document.getElementById('test').style.backgroundColor = '#f33';
})
document.getElementById('b2').addEventListener('click', function(){
  document.getElementById('test').style.backgroundColor = '#3f3';
})
document.getElementById('b3').addEventListener('click', function(){
  document.getElementById('test').style.backgroundColor = '#33f';
})



document.getElementById('bb1').addEventListener('click', function(){
  document.getElementById('test2').classList.remove('blue', 'green', 'red')
  document.getElementById('test2').classList.add('red')
})
document.getElementById('bb2').addEventListener('click', function(){
  document.getElementById('test2').classList.remove('blue', 'green', 'red')
  document.getElementById('test2').classList.add('green')
})
document.getElementById('bb3').addEventListener('click', function(){
  document.getElementById('test2').classList.remove('blue', 'green', 'red')
  document.getElementById('test2').classList.add('blue')
})

#test, #test2{
  transition: background-color 2s;
  background: #aaa;
  width:150px;
  height:30px;
}


.red{
  animation-name: red_anim;
    animation-duration: 2s;
}
.green{
  animation-name: green_anim;
    animation-duration: 2s;
}
.blue{
  animation-name: blue_anim;
    animation-duration: 2s;
}


@keyframes red_anim {100% {background-color: #f33;}}
@keyframes green_anim {100% {background-color: #3f3;}}
@keyframes blue_anim {100% { background-color: #33f; } }

Transition
<div id="test"></div>

<button id="b1">red</button>
<button id="b2">green</button>
<button id="b3">blue</button>


<br>
<br>

Animation
<div id="test2"></div>

<button id="bb1">red</button>
<button id="bb2">green</button>
<button id="bb3">blue</button>

Answer 4

如果动画取决于background-color，您可以执行以下操作。我不确定这是多么性能，但我可以使用动态<style>标记，并随意替换其内容。

＆＃13;

var c = $('#c'),
    style = $('#animation'),
    color = '#23b7e5';
    
c.on('change', function(){

    color = this.value;
    style.html( buildStyle() );

}).trigger('change');


function buildStyle(){

  return ['@keyframes growDot {  100% {',
                   'background-color: ' + color + ';',
                   '-webkit-transform: scale3d(0.9, 0.9, 0.9);',
                   'transform: scale3d(0.9, 0.9, 0.9);',
           '}'].join('');

}

＆＃13;

.a {
 width:100px;
 height:100px;
 animation: 2s growDot infinite;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<style id="animation"></style>
<input type="color" id="c" value="#23b7e5"/>
<div class="a"></div>

＆＃13;

在运行时更改css关键帧属性

4 个答案: