How to dynamically change css keyframes in js

JS method to dynamically change css keyframes: 1. Obtain the link style sheet and style style sheet introduced on the web page through the "document.styleSheets" interface; 2. Insert through the "insertRule(rule,index)" method The new "@keyframes" rule will do.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to dynamically change css keyframes with js?

js dynamically modify @keyframes rules in CSS3

## Here is a small demo of a clock. The material given is as follows:

The initial direction of the second hand is towards 6 o'clock. We set the @keyframes rule for the second hand to rotate once

	@keyframes rotate {
		   from{
		   	   transform: rotate(0deg);
		   }
           to{
               transform: rotate(360deg);
           }
	}

This setting can rotate one week normally, but if we change the initial position of the second hand, for example, set it to the 12 o'clock direction

	transform: rotate(180deg);

, then the previous @keyframes rule needs to be converted from 0deg=>360deg to 180deg=> 540deg

Then the problem arises. This modification is not dynamic. We cannot modify the @keyframes rules in the style every time

We need to use our js here

First of all Obtain the link style sheet and style style sheet introduced on the web page through the document.styleSheets interface

	var style = document.styleSheets[0];

Then insert a new @keyframes rule through the insertRule(rule,index) method

	var newdeg = 540;
	style.insertRule("@keyframes secondrotate {to{transform: rotate(" + newdeg + "deg);}}",4);

In this way, the effect we need is achieved

Recommended learning: "

css video tutorial"

The above is the detailed content of How to dynamically change css keyframes in js. For more information, please follow other related articles on the PHP Chinese website!