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>

why you are trying to change css with .attr() ?

Ivan
– Ivan

2020-02-04 07:39:53 +00:00
Commented Feb 4, 2020 at 7:39 — Ivan
– Ivan, Commented Feb 4, 2020 at 7:39

Matan Sanbira · Accepted Answer · 2020-02-04 08:03:41Z

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>

Mihi · Accepted Answer · 2020-02-04 08:21:48Z

2

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');

answered Feb 4, 2020 at 8:21

Mihi

2043 silver badges7 bronze badges

Comments

Nijeesh Joshy · Accepted Answer · 2020-02-04 07:44:47Z

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>

Collectives™ on Stack Overflow

How to Dynamically change animation-name in CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related