CSS Keyframes Setting up a basic keyframe effect then some approaches for dynamically changing updating replaying keyframes on the fly through JavaScript page load transition intro effect document body style height 200px let link document createElement style document head appendChild link link rel stylesheet link type text css link media all link innerHTML keyframes slideInFromLeft 0 transform translateX 100 100 transform translateX 0 div This section calls the slideInFromLeft animation we defined above animation 1s ease out 0s 1 slideInFromLeft background 333 padding 30px keyframes slideInFromRight 0 transform translateX 2000px 50 transform translateX 2000px 100 transform translateX 0 a animation 2s ease out 0s 1 slideInFromRight text decoration none display inline block margin right 10px color fff let div document createElement div document body appendChild div div innerHTML a href Home a a href Details a a href Animations a a href Contact a animate keyframe method for manipulating frames animations dyamically using javascript document body style height 200px let link document createElement style document head appendChild link link rel stylesheet link type text css link media all link innerHTML keyframes myanimate 0 transform rotate 0deg 100 transform rotate 90deg span animation 1s ease out 0s 1 myanimate position absolute left 100px top 100px background rgb 10 100 10 padding 30px border 1px solid green let span document createElement span document body appendChild span span innerHTML HELLO span id box ref animate method https developer mozilla org en US docs Web API Element animate let div document createElement div div innerHTML click1 document body appendChild div div onclick function document getElementById box animate keyframes transform translateY 0px from transform translateY 300px to timing options duration 1000 iterations Infinity onclick console log ready animation searches the css to update the keyframes let link document createElement style document head appendChild link link rel stylesheet link type text css link media all link innerHTML keyframes myanimate 0 transform rotate 0deg 100 transform rotate 90deg span animation 1s ease out 0s 1 myanimate position absolute left 100px top 100px background rgb 100 100 0 padding 30px border 1px solid green document body style height 200px let span document createElement span document body appendChild span span innerHTML HELLO span id box let div document createElement div div innerHTML click1 document body appendChild div div onclick function let box document getElementById box let myRules document styleSheets 0 cssRules let keyframes myRules 0 a CSSKeyframesRule inherits from CSSRule console log cssText keyframes cssText keyframes deleteRule 0 keyframes deleteRule 100 console log now cssText keyframes cssText keyframes appendRule 0 transform rotate 0deg keyframes appendRule 100 transform rotate 200deg console log keyframes cssText kick the new animation going box style webkitAnimation none setTimeout function box style webkitAnimation 10 onclick console log ready animation flexible version search method let link document createElement style document head appendChild link link rel stylesheet link type text css link media all link innerHTML keyframes myanimate 0 transform rotate 0deg 100 transform rotate 90deg span animation 1s ease out 0s 1 myanimate position absolute left 100px top 100px background rgb 0 100 100 padding 30px border 1px solid green document body style height 200px let span document createElement span document body appendChild span span innerHTML HELLO span id box function findcss el var sheets document styleSheets ret el matches el matches el webkitMatchesSelector el mozMatchesSelector el msMatchesSelector el oMatchesSelector for var i in sheets var rules sheets i rules sheets i cssRules for var r in rules https developer mozilla org en US docs Web API CSSRule type if rules r type CSSRule KEYFRAMES_RULE 7 console log st rules r selectorText console log tt rules r type if el matches rules r cssText ret push rules r return ret let div document createElement div div innerHTML click1 document body appendChild div div onclick function let box document getElementById box let myRules findcss box console log myRules myRules num myRules length let keyframes myRules 0 a CSSKeyframesRule inherits from CSSRule console log cssText keyframes cssText keyframes deleteRule 0 keyframes deleteRule 100 console log now cssText keyframes cssText keyframes appendRule 0 transform rotate 0deg keyframes appendRule 100 transform rotate 300deg console log keyframes cssText kick the new animation going box style webkitAnimation none setTimeout function box style webkitAnimation 10 onclick console log ready
ent createElement div div innerHTML click1 document body appendChild div div onclick function let box document getElementById box let myRules document styleSheets 0 cssRules let keyframes myRules 0 a CSSKeyframesRule inherits from CSSRule console log cssText keyframes cssText keyframes deleteRule 0 keyframes deleteRule 100 console log now cssText keyframes cssText keyframes appendRule 0 transform rotate 0deg keyframes appendRule 100 transform rotate 200deg console log keyframes cssText kick the new animation going box style webkitAnimation none setTimeout function box style webkitAnimation 10 onclick console log ready animation flexible version search method let link document createElement style document head appendChild link link rel stylesheet link type text css link media all link innerHTML keyframes myanimate 0 transform rotate 0deg 100 transform rotate 90deg span animation 1s ease out 0s 1 myanimate position absolute left 100px top 100px background rgb 0 100 100 padding 30px border 1px solid green document body style height 200px let span document createElement span document body appendChild span span innerHTML HELLO span id box function findcss el var sheets document styleSheets ret el matches el matches el webkitMatchesSelector el mozMatchesSelector el msMatchesSelector el oMatchesSelector for var i in sheets var rules sheets i rules sheets i cssRules for var r in rules https developer mozilla org en US docs Web API CSSRule type if rules r type CSSRule KEYFRAMES_RULE 7 console log st rules r selectorText console log tt rules r type if el matches rules r cssText ret push rules r return ret let div document createElement div div innerHTML click1 document body appendChild div div onclick function let box document getElementById box let myRules findcss box console log myRules myRules num myRules length let keyframes myRules 0 a CSSKeyframesRule inherits from CSSRule console log cssText keyframes cssText keyframes deleteRule 0 keyframes deleteRule 100 console log now cssText keyframes cssText keyframes appendRule 0 transform rotate 0deg keyframes appendRule 100 transform rotate 300deg console log keyframes cssText kick the new animation going box style webkitAnimation none setTimeout function box style webkitAnimation 10 onclick console log ready