How to Dynamically change animation-name in CSS

Question

I am trying to change the animation-name in (loader--text: after) CSS with the help of js Or Jquery but I am only able to change (content) in CSS not able to change animation-name I have tried:

code:

 $('.loader--text').attr("data-content", "Connection Printer"); // It's Working $('.loader--text').attr("data-animation", "connecting-text"); // But It's Not working

 .loader--text:after { content: attr(data-content); font-weight: bold; animation-name: attr(data-animation); animation-duration: 3s; animation-iteration-count: infinite; } @keyframes connecting-text { 0% { content: "Connecting Printer"; } 25% { content: "Connecting Printer."; } 50% { content: "Connecting Printer.."; } 75% { content: "Connecting Printer..."; } } @keyframes fetching-text { 0% { content: "Fetching Story"; } 25% { content: "Fetching Story."; } 50% { content: "Fetching Story.."; } 75% { content: "Fetching Story..."; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='loader--text'></div>

Answer 1

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>

Answer 2

you can use attr() in css to pass only string values. animation-name is not a string value

more info : https://css-tricks.com/css-attr-function-got-nothin-custom-properties/

you can change the animation by changing the style.animationName property of the element.

 let state = 1; const square = document.getElementById('square') document.getElementById('test').addEventListener("click", ()=>{ if(state == 1){ square.style.animationName = "second" state = 2 } else{ square.style.animationName = "first" state = 1 } })

 #square{ background: red; padding: 50px; width:50px; height:50px; /* animation-name: attr(data-animate); */ animation-name: first; position:absolute; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes first { 0% { left: 0 } 100% { left: 600px; } } @keyframes second { 0% { top: 0 } 100% { top: 600px; } }

 <div id="square" data-animate="first"> </div> <button id="test">TOGGLE</button>

Answer 3

You can only use attr() for the content attribute in this case.

I'd advise to get rid of jQuery (no hate, I used to love using it), but since you're already using it, you can switch animation name like this:

$('div').css('animation-name', 'anim2');

This of course doesn't apply for pseudo elements (such as :after).

Anyway I think it's much easier to create two separated classes (each one of them applies a different animation) and then just toggle the classes, I think it's much easier to use.

.loader--text.one:after{animation: ...}
.loader--text.two:after{animation: ...}

$('.loader--text').removeClass('one').addClass('two');