Changing CSS keyframes through Javascript

Question

I would like to know whether it is possible to adjust the contents of CSS keyframes, as I have seen a variety of suggestions online but none of them seem to work for me.

These are the keyframes I have:

@keyframes changeColor {
  0% {
    color: yellow;
  }
  50% {
    color: red;
  }
}

@-moz-keyframes changeColor {
  0% {
    color: yellow;
  }
  50% {
    color: red;
  }
}

@-webkit-keyframes changeColor {
  0% {
    color: yellow;
  }
  50% {
    color: red;
  }
}


@-o-keyframes changeColor {
  0%{
    color: yellow;
  }
  50% {
    color: red;
  }
}

I would like to be able to adjust the color attribute for each one of the above keyframes through Javascript, so that the colours can be changed according to the value passed through Javascript. Is this possible in any way?

Thank you

Can you add the html of what you are trying to do

Gerardo BLANCO
– Gerardo BLANCO

2018-02-09 00:21:44 +00:00
Commented Feb 9, 2018 at 0:21 — Gerardo BLANCO
– Gerardo BLANCO, Commented Feb 9, 2018 at 0:21

davecar21 · Accepted Answer · 2018-02-09 00:24:57Z

1

Animating KeyFrame using jQuery is possbile using jQuery.Keyframes

var supportedFlag = $.keyframe.isSupported();
$.keyframe.define([{
    name: 'roll-clockwise',
    '0%': {
        'color' : 'green'
    },
    '100%': {
        'color' : 'yellow'
    }
    }
]);

$("p").playKeyframe({
    name: 'changeColor',
    duration: 2000
});

For more info please see this link. https://github.com/Keyframes/jQuery.Keyframes

answered Feb 9, 2018 at 0:24

davecar21

2,6741 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Questionnaire Over a year ago

I have seen the link you sent me. I have followed the instructions but it's not working for me as it is not recognising any of the keyframe functions I am writing.

Questionnaire Over a year ago

I am getting $.keyframe.isSupported is not a function.

rpivovar · Accepted Answer · 2018-02-09 00:32:05Z

This might work better entirely in Javascript, with the only consistent CSS attribute that should always be on the element a transition attribute: transition: color 0.5s ease-out for example.

Then in javascript you could have a setInterval alternate between colors somehow:

// Note that this is psuedocode and will need to be refactored slightly to better fit your own code

// variables storing color values
var colorA = 'red', 
    colorB = 'blue';

//store element you are changing in a variable
const ELEMENT = document.querySelector('element'); 

function changeColors() {

    // store current color value of ELEMENT in a variable called currentColor
    let currentColor = ELEMENT.style.color; 

    // if color is currently A, switch to B
    if (currentColor == colorA) { 
        ELEMENT.style.color = colorB;
    }
    // else, switch to A
    else { 
        ELEMENT.style.color = colorA;
    }

}

// call set interval to alternate colors with same timing value as set in transition attribute in CSS
setInterval(changeColors, 500);

That's just one way it could be done in javascript, but the main takeaway here is that, at the end of the day, it's probably a lot more feasible to do it all in javascript rather than with CSS animations.

I would like to this but unfortunately I can't as I need to stick strictly to CSS for animations as this is what is required :( But I do get your point. Thanks for this.

Collectives™ on Stack Overflow

Changing CSS keyframes through Javascript

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related