Dynamically Modify Webkit Animation with JavaScript

programmatically changing webkit-transformation values in animation rules

Use the CSSOM

var style = document.documentElement.appendChild(document.createElement("style")),
rule = " run {\
0% {\
-webkit-transform: translate3d(0, 0, 0); }\
transform: translate3d(0, 0, 0); }\
}\
100% {\
-webkit-transform: translate3d(0, " + your_value_here + "px, 0);\
transform: translate3d(0, " + your_value_here + "px, 0);\
}\
}";
if (CSSRule.KEYFRAMES_RULE) { // W3C
style.sheet.insertRule("@keyframes" + rule, 0);
} else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
style.sheet.insertRule("@-webkit-keyframes" + rule, 0);
}

If you want to modify a keyframe rule in a stylesheet that's already included, do the following:

var
stylesheet = document.styleSheets[0] // replace 0 with the number of the stylesheet that you want to modify
, rules = stylesheet.rules
, i = rules.length
, keyframes
, keyframe
;

while (i--) {
keyframes = rules.item(i);
if (
(
keyframes.type === keyframes.KEYFRAMES_RULE
|| keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE
)
&& keyframes.name === "run"
) {
rules = keyframes.cssRules;
i = rules.length;
while (i--) {
keyframe = rules.item(i);
if (
(
keyframe.type === keyframe.KEYFRAME_RULE
|| keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE
)
&& keyframe.keyText === "100%"
) {
keyframe.style.webkitTransform =
keyframe.style.transform =
"translate3d(0, " + your_value_here + "px, 0)";
break;
}
}
break;
}
}

If you don't know the order but do know the URL of the CSS file, replace document.styleSheets[0] with document.querySelector("link[href='your-css-url.css']").sheet.

How to Dynamically change animation-name in CSS

after some research you can only change the content styling with attr method.
you can take a different approach to the task like turning the :after animation to only the dots and use innerHTML for the dom itself.

exmple:

const loader = document.querySelector(".loader--text");
loader.innerHTML = "Connecting Printer";
function changeText() { loader.innerHTML = "Fetching Story";}
.loader--text {  cursor: pointer;}
.loader--text:after { content: ""; font-weight: bold; animation-name: dots; animation-duration: 3s; animation-iteration-count: infinite;}
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class='loader--text' onclick="changeText()"></div>

How to change value of keyframe dynamically?

Here's the reference for using transition:

document.querySelector('.box').addEventListener('click', function() {   // set the left value dynamically   this.style.left = '40%';});
/* cosmetics, ignore these */.box {  width: 100px;  height: 100px;  background-color: salmon;  display: flex;  justify-content: center;  align-items: center;  color: white;}
/* relevent styles */.box { position: absolute; left: 0; transition: left 0.5s;}
<div class="box">click me</div>

generate @-webkit-keyframes CSS dynamically with JavaScript?

Yes, i use Jquery library and then apply like so:

Say in this situation i want the left value to be dynamic from a div with attribute class value = "push"

<!--HTML-->
<div class="push">Wall</div>

//--JS--
var KeyFrame =
{
init: function(){
if(!KeyFrame.check)
{
//get the left position
var pushLeft = $('.push').position().left;
//set the style and append to head
var css = $('<style>@keyframes mymove{from {left:0px;}to {left:'+pushLeft+'px;}}</style>').appendTo('head'); //make sure you don't carriage return the css inline statement, or else it'll be error as ILLEGAL
//so u don't keep appending style to head
KeyFrame.check = true;
}
}
}
KeyFrame.init();

CSS animate while dynamically changing translation

As per my comment, the CSS variables tranX and tranY are scoped to the #bee1 selector, and therefore the values are actually not accessible to the animation definition. If you simply want the bee to fly all over the place randomly without going back to its original position, you can update your code to this:

const _locationsInterval = 500; // ms

And for the CSS:

#bee1 {
transform: translateX(var(--tranX)) translateY(var(--tranY));
--tranX: 0;
--tranY: 0;
background: red;
transition: all 500ms ease-in-out;
}

const _wingsInterval = 500; // msconst _locationsInterval = 500; // msvar frontWings = document.getElementsByClassName('front-wing');var backWings = document.getElementsByClassName('back-wing');var bees = document.getElementsByClassName('bee');
///////////////////////////////////////////////////////////////////// update all bees' wings every _wingsInterval ms///////////////////////////////////////////////////////////////////setInterval(function() { var rotFront = -Math.round(Math.random() * 10 + 5); for (let wing of frontWings) { wing.style.setProperty('--rotFront', rotFront + "deg"); } var rotBack = -Math.round(Math.random() * 20 + 2); for (let wing of backWings) { wing.style.setProperty('--rotBack', rotBack + "deg"); }}, _wingsInterval);
///////////////////////////////////////////////////////////////////// update all bees' locations every _locationsInterval ms///////////////////////////////////////////////////////////////////setInterval(function() { for (let bee of bees) { bee.style.setProperty('--tranX', Math.random() * 340 + "px"); bee.style.setProperty('--tranY', Math.random() * 257 + "px"); }}, _locationsInterval);
body {  background-color: black;}
.image-contain { display: block; margin: auto; width: 800px;}
.front-wing { -webkit-animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both; animation: flapWingFront 60ms ease-in-out infinite alternate-reverse both; --tranX: -52%; --tranY: -26%; --rotFront: 0; position: absolute;}
@-webkit-keyframes flapWingFront { 0% { -webkit-transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY)); transform: rotate(0) translateX(var(--tranX)) translateY(var(--tranY)); } 100% { -webkit-transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY)); transform: rotate(var(--rotFront)) translateX(var(--tranX)) translateY(var(--tranY)); }}
.back-wing { -webkit-animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both; animation: flapWingBack 40ms ease-in-out infinite alternate-reverse both; --btranX: -54%; --btranY: -15%; --rotBack: 0; position: absolute;}
@-webkit-keyframes flapWingBack { 0% { -webkit-transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY)); transform: rotate(0) translateX(var(--btranX)) translateY(var(--btranY)); } 100% { -webkit-transform: rotate(var(--rotBack)) translateX(var(--btranX)) translateY(var(--btranY)); transform: rotate(var(--rotBack)) translateX(--var(--btranX)) translateY(var(--btranY)); }}
#bee1 { transform: translateX(var(--tranX)) translateY(var(--tranY)); --tranX: 0; --tranY: 0; background: red; transition: all 500ms ease-in-out;}
<div class="image-contain">
<svg id="bee1" class="bee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 340 275" width="75" height="50"> <defs> <linearGradient id="a"> <stop offset="0" stop-color="#c5c5c7"/> <stop offset="1" stop-color="#c5c5c7" stop-opacity="0"/> </linearGradient> <path d="M453.56 309.74c-11.86-45.92-22.57-71.57-55.36-100.67-21.86-19.41-40.14-15.15-54.82 12.76.16 1.03.93 6.18 2.32 15.46" id="d"/> <path d="M453.52 309.46c-78.71-25.57-114.71-49.86-107.99-72.87" id="b"/> <path d="M329.87 244.41c10.67.51 18.19-1.54 20.5-13.36 9.08-46.7-15.06-50.63-24.91-52.94-9.86-2.31-32.31-8.05-41.92-1.55-6.41 4.34-9.41 9.32-8.99 14.94 1.11 4.69 1.8 7.61 2.08 8.78.38 1.62 1.01 3.16 1.87 4.56.33.54-.81-1.33-.69-1.12 1.55 2.53 2.63 5.33 3.17 8.26 1.64 8.8 3.98 14.55 7.02 17.25 19.13 16.95 35.93 14.91 41.87 15.18z" id="e"/> <path d="M236.72 232.73l5.12 4.79-6.97 15.88 13.4-14.87-12.88-11.34-7.85 17.15z" id="f"/> <path d="M262.3 156.27c-.45 1.33-1.37 4.11-1.83 5.45a1.22 1.22 0 0 1-1.61.76c-3.15-1.2-11.39-4.37-14.53-5.58a1.358 1.358 0 0 1-.8-1.7c.44-1.33 1.37-4.11 1.81-5.44.22-.67.96-1.02 1.62-.77l14.53 5.58c.68.26 1.04 1.01.81 1.7z" id="g"/> <path d="M259.43 179.58c-.91.41-2.58 1.16-3.5 1.55a1 1 0 0 1-1.37-.62c-.91-2.8-3.25-10.14-4.16-12.95-.19-.62.1-1.28.69-1.54.92-.41 2.59-1.15 3.5-1.56.56-.24 1.2.04 1.38.62.91 2.81 3.25 10.16 4.16 12.96.19.61-.11 1.28-.7 1.54z" id="h"/> <path d="M254.44 164.19c-.36 1.07-1.09 3.28-1.45 4.35-.18.53-.77.81-1.29.6-2.51-.96-9.08-3.48-11.58-4.44-.55-.21-.83-.8-.64-1.35.35-1.07 1.09-3.29 1.44-4.34.18-.54.77-.82 1.3-.62 2.5.97 9.07 3.48 11.58 4.46.54.19.82.79.64 1.34z" id="i"/> <path d="M237.5 238.35c-10.09-8.2-9.08-28.86 2.26-46.12 11.32-17.26 28.73-24.61 38.81-16.42 10.09 8.2 9.08 28.87-2.25 46.12-11.34 17.26-28.73 24.61-38.82 16.42z" id="j"/> <path d="M268.55 175.57c-1.13.51-3.24 1.44-4.38 1.95-.69.3-1.5-.05-1.73-.78-1.13-3.52-4.08-12.72-5.2-16.26-.25-.76.12-1.6.87-1.92 1.13-.51 3.24-1.45 4.38-1.95.69-.31 1.5.05 1.73.78 1.13 3.52 4.08 12.73 5.2 16.25.25.77-.13 1.6-.87 1.93z" id="k"/> <path d="M247.35 234.76c-5.23-4-2.62-18.27 5.81-31.88 8.44-13.59 19.53-21.4 24.75-17.4 5.24 3.98 2.63 18.26-5.81 31.86-8.43 13.61-19.52 21.4-24.75 17.42z" id="l"/> <path d="M248.97 218.74c-1.11-.9 2.26-8.12 7.51-16.1 5.25-7.98 10.41-13.73 11.51-12.83 1.12.9-2.25 8.11-7.5 16.09s-10.41 13.74-11.52 12.84z" id="m"/> <linearGradient xlink:href="#a" id="n" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.09084 0 0 1 -28.066 14)"/> <linearGradient xlink:href="#a" id="c" x1="308.975" y1="187.42" x2="498.657" y2="182.332" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.72767 -.38085 .34914 .66708 10.105 193.084)"/> </defs> <g transform="translate(-177.91 -74.04)"> <use xlink:href="#b" width="100%" height="100%" fill="#eaad22"/> <use xlink:href="#b" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <path class="back-wing" d="M300.374 200.434s116.837-96.705 117.927-71.09c1.09 25.615-6.342 42.957-111.889 75.617z" fill="url(#c)" transform="translate(-177.91 -88.04)"/> <g transform="translate(-177.91 -88.04)"> <g transform="translate(0 14)"> <use xlink:href="#d" width="100%" height="100%" fill="#eaad22"/> <use xlink:href="#d" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <g transform="translate(0 14)"> <use xlink:href="#e" width="100%" height="100%" fill="#ead822"/> <use xlink:href="#e" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <g transform="translate(0 14)"> <use xlink:href="#f" width="100%" height="100%" fill="#ead822"/> <use xlink:href="#f" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <g transform="translate(0 14)"> <use xlink:href="#g" width="100%" height="100%" fill="#383729"/> <use xlink:href="#g" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <g transform="translate(0 14)"> <use xlink:href="#h" width="100%" height="100%" fill="#383729"/> <use xlink:href="#h" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <g transform="translate(0 14)"> <use xlink:href="#i" width="100%" height="100%" fill="#383729"/> <use xlink:href="#i" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <g transform="translate(0 14)"> <use xlink:href="#j" width="100%" height="100%" fill="#ead822"/> <use xlink:href="#j" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <g transform="translate(0 14)"> <use xlink:href="#k" width="100%" height="100%" fill="#383729"/> <use xlink:href="#k" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <g transform="translate(0 14)"> <use xlink:href="#l" width="100%" height="100%" fill="#3e3904"/> <use xlink:href="#l" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <g transform="translate(0 14)"> <use xlink:href="#m" width="100%" height="100%" fill="#fff"/> <use xlink:href="#m" width="100%" height="100%" fill-opacity="0" stroke="#000" stroke-opacity="0"/> </g> <path d="M336.576 240.154c4.009-.5-.136 5 1.328 6.432 1.4 1.37 9.97.116 7.93 2.627-2.134 2.628-10.78 3.916-15.078 6.175-4.108 2.158-8.267 7.628-12.097 8.105-4.008.5.137-5-1.328-6.432-1.4-1.37-9.97-.115-7.93-2.626 2.134-2.628 10.78-3.917 15.079-6.175 4.107-2.159 8.266-7.628 12.096-8.106z" fill="#463207"/> <path d="M343.13 288.255c-2.381 5.955-6.17-4.324-9.066-3.485-2.768.803-7.628 13.69-9.247 8.793-1.695-5.125 3.178-18.145 3.57-25.956.375-7.465-3.366-17.74-1.09-23.43 2.382-5.956 6.17 4.324 9.066 3.484 2.768-.802 7.628-13.69 9.247-8.793 1.695 5.125-3.177 18.145-3.57 25.957-.375 7.464 3.366 17.74 1.09 23.43z" fill="#463207"/> <ellipse cx="332.615" cy="297.798" rx="7.196" ry="21.188" fill="#463207"/> <path d="M341.673 329.106c.457 2.686-2.767-2.585-3.492-2.412-.693.166.387 6.002-1.092 3.506-1.548-2.612-2.65-8.512-4.092-12.255-1.377-3.576-4.586-8.84-5.023-11.408-.457-2.686 2.768 2.585 3.493 2.412.693-.166-.387-6.002 1.092-3.506 1.548 2.612 2.65 8.512 4.091 12.254 1.378 3.577 4.587 8.842 5.023 11.409z" fill="#463207"/> <ellipse cx="351.115" cy="128.439" rx="8.237" ry="25.267" transform="matrix(.91978 .39243 -.35584 .93455 0 0)" fill="#463207"/> <path d="M254.936 313.666c-1.91-.697 1.976-11.42 2.96-16.422.984-5 .702-12.594 3.596-16.898 2.893-4.304 4.709 1.01 6.618 1.707 1.91.697 7.09-2.064 6.107 2.937-.984 5.001-6.686 10.41-9.58 14.715-2.893 4.304-7.791 14.658-9.701 13.961z" fill="#463207"/> <path d="M237.744 319.857c-2.685.462 2.58-2.772 2.405-3.497-.166-.693-6.001.398-3.508-1.086 2.61-1.553 8.507-2.665 12.248-4.114 3.574-1.384 8.832-4.603 11.398-5.044 2.686-.462-2.58 2.772-2.405 3.497.167.693 6.002-.398 3.508 1.086-2.609 1.552-8.506 2.665-12.247 4.114-3.574 1.384-8.833 4.602-11.399 5.044zM288.076 232.159c-4.008-.5.137 5-1.328 6.432-1.399 1.369-9.97.115-7.93 2.626 2.134 2.628 10.78 3.916 15.079 6.175 4.107 2.159 8.266 7.628 12.097 8.106 4.008.5-.137-5 1.327-6.433 1.4-1.369 9.97-.115 7.93-2.626-2.134-2.628-10.78-3.916-15.078-6.175-4.108-2.158-8.267-7.628-12.097-8.105zM363.99 244.882c3.917.986-1.938 4.61-1.092 6.477.809 1.783 9.252 3.717 6.442 5.32-2.941 1.676-11.467-.254-16.292.295-4.61.525-10.467 4.118-14.21 3.176-3.918-.986 1.937-4.61 1.09-6.477-.808-1.783-9.251-3.717-6.44-5.32 2.94-1.676 11.466.254 16.29-.295 4.611-.525 10.468-4.118 14.212-3.176z" fill="#463207"/> <path d="M370.502 303.896c-2.736 7.294-7.087-5.296-10.415-4.268-3.18.983-8.761 16.767-10.622 10.77-1.947-6.277 3.65-22.224 4.101-31.792.43-9.143-3.866-21.727-1.252-28.697 2.736-7.294 7.087 5.296 10.415 4.268 3.18-.983 8.761-16.767 10.622-10.77 1.947 6.277-3.65 22.224-4.101 31.792-.43 9.143 3.866 21.727 1.252 28.697z" fill="#463207"/> <ellipse cx="238.882" cy="419.961" rx="7.196" ry="21.188" transform="rotate(-19.343)" fill="#463207"/> <path d="M383.416 343.67c1.321 2.383-3.467-1.522-4.094-1.119-.599.386 2.353 5.536.13 3.67-2.325-1.952-5.319-7.153-7.919-10.207-2.484-2.919-7.256-6.823-8.518-9.1-1.32-2.384 3.467 1.521 4.094 1.118.6-.386-2.353-5.535-.13-3.67 2.325 1.952 5.319 7.154 7.919 10.208 2.485 2.918 7.256 6.823 8.518 9.1z" fill="#463207"/> <path d="M415.769 310.79l-13.793-6.396s7.362-1.287 18.773-11.637c11.41-10.35 9.612-31.539 9.612-31.539s5.235 7.62 6.815 11.805c1.58 4.187-2.141 18.253-6.19 23.1-5.438 5.887-8.08 10.368-15.217 14.668zM388.927 298.598l-16.93-9.215s10.423-1.573 26.58-14.218c16.155-12.646 13.608-38.533 13.608-38.533s7.813 8.509 9.85 12.224c2.236 5.115-3.232 24.5-8.964 30.422-7.7 7.193-14.04 14.066-24.144 19.32z" fill="#2d2d2d"/> </g> <path class="front-wing" d="M308.975 201.42s197.045-41.837 182.552-11.024c-14.493 30.812-33.92 46.643-178.235 20.07z" fill="url(#n)" transform="translate(-177.91 -88.04)"/></svg>
</div>

How to dynamically create '@-Keyframe' CSS animations?

well i don't think it is easy to create dynamic @keyframes they are inflexible because they must be hard-coded.

Transitions are a little easier to work with, as they can gracefully respond to any CSS changes performed by JavaScript.

However, the complexity that CSS transitions can give you is pretty limited — an animation with multiple steps is difficult to achieve.

This is a problem that CSS @keyframe animations are meant to solve, but they don’t offer the level of dynamic responsiveness that transitions do.

but these links might help you

Link1 : a tool that generates a @-webkit-keyframe animation with many tiny steps. This opens the door to an unlimited selection of easing formula.

Link2 it will be a great help for you to take it as a base as it provides a UI to create animations and exports it to CSS code.

I guess this solution will definitely work for you. Its is used for dynamic keyframes

Dynamically creating CSS keyframe animation via JavaScript

First, get rid of these moz prefixes everywhere, Firefox supports unprefixed animation since years, so do every browsers. (besides, it's style.MozXXX)

Then, style.animationName should be the animation's name (yes), and your animation is called "pop", not "pop 2s".

2s would be a valid value for style.animationDuration:

var cue = document.createElement('div');cue.setAttribute('id', 'cue');cue.setAttribute(    'style',    'opacity:' + '0;');cue.textContent = "hello";
var cueAnimation = document.createElement('style');cueAnimation.type = 'text/css';var rules = document.createTextNode('@keyframes pop {'+ '0% { opacity:0; }'+ '50% { opacity:1; }'+ '100% { opacity:0; }'+ '}');cueAnimation.appendChild(rules);cue.appendChild(cueAnimation);
appContainer.appendChild(cue);
cue.style.animationName = 'pop';cue.style.animationDuration = '2s';
<div id="appContainer"></div>

Dynamically create and apply CSS3 animations

Yes, we can dynamically create, apply and remove CSS3 animations to an element in the page.

To dynamically create an animation, we need to use the insertRule or addRule functions to add the @keyframes rules and append it to the stylesheet. Once the animation is appended, applying it to the element is very simple, we just need to set the required property value to the animation property via inline styles. Removing it agian is very simple, we just need to set the value back to null when it needs to be removed.

In the below snippet, I have first inserted an animation and applied it to the element on load. When the animation starts, the element fires the animationstart event. Within this event listener, I've obtained the outerHTML of the element that is being animated and printed it to show how inline style is present and then at the end of the animation (using the animationend event listener), I've removed the inline style and printed the outerHTML after it to show how it no longer has the animation.

There are no other simpler ways to dynamically create CSS3 animations. All possible solutions will involve creating and appending @keyframes to the stylesheets using basic insertRule, addRule or the keyframes specific appendRule function (which is used to append rules to an existing keyframe).

var elm = document.querySelector('.to-animate');var op = document.querySelector('.output');
var animName = "shake-up-down", animDuration = "3s", animTiming = "linear", animFillMode = "forwards", animIteration = "3";
var ruleText = "0% {transform: translateY(0px);}";ruleText += "25% {transform: translateY(10px);}";ruleText += "75% {transform: translateY(-10px);}";ruleText += "100% {transform: translateY(0px);}";

/* From David Walsh's blog */function addCSSAnimRule(sheet, name, rules, index) { if ("insertRule" in sheet) { sheet.insertRule("@keyframes " + name + "{" + rules + "}", index); } else if ("addRule" in sheet) { sheet.addRule("@keyframes " + name, rules, index); }}
/* Self written */function applyAnimation(elm, name, duration, timing, iteration, fillmode) { elm.style["animation"] = name + " " + duration + " " + timing + " " + iteration + " " + fillmode; /* or if you want to set them individually, comment the above line and uncomment this elm.style["animationName"] = name; elm.style["animationDuration"] = duration; elm.style["animationTimingFunction"] = timing; elm.style["animationIterationCount"] = iteration elm.style["animationFillMode"] = fillmode;*/}
addCSSAnimRule(document.styleSheets[0], animName, ruleText, 0);applyAnimation(elm, animName, animDuration, animTiming, animIteration, animFillMode);
/* to print output */
elm.addEventListener("animationstart", function(e) { op.textContent = "Animation " + e.animationName + " has started."; op.textContent += "\n\nElement's Outer HTML: \n"; op.textContent += elm.outerHTML; op.textContent += "\n\n------------------------------------------------------------------------------";});
elm.addEventListener("animationend", function(e) { elm.removeAttribute("style"); /* remove the animation */ op.textContent += "\nAnimation " + e.animationName + " has ended."; op.textContent += "\n\nElement's Outer HTML: \n"; op.textContent += elm.outerHTML; op.textContent += "\n\n------------------------------------------------------------------------------";});
.to-animate {  height: 100px;  width: 100px;  margin: 10px;  border: 1px solid red;}
<div class='to-animate'></div><pre class='output'></pre>


Related Topics



Leave a reply



Submit