I have a simple keyframe animation which grows a dot and transforms the background into blue. How can I dynamically alter this background color?
@keyframes growDot {
100% {
background-color: #23b7e5;
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
}
Obviously, something like $('keyframes growDot').css("background-color", "#FF00B0"); is not working.
You can't target/modify a CSS class with jQuery. You can, however, add a new class that overrides an existing class.
$("[your selector]").addClass("[class that overrides growDot");
Having said that, this approach seems a bit off. As others have suggested, it would be best to change the background of the div itself, independent of the .growDot class.
You should change the background of the div that is animated instead of changing the background of the keyframe.
If the animation depends on the background-color, you can do the following. I am not sure how performance-wise this is, but I can I go with dynamic <style> tag, and replace its content on will.
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('');
}
.a {
width:100px;
height:100px;
animation: 2s growDot infinite;
}<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>I would recommend using css transition for things like this.
They are more robust in cases that you need to abort animations or blend between them. Also animations will not "hold" the assigned value after they are finished.
(see code snippets the animation part will cut to the original color after finishing. also if you switch the animation mid way, the new animation will start from the original color)
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>