CODEWITHSUNDEEP
javascriptjquerycss
Avdhesh Sharma ROR
Avdhesh Sharma ROR

Reputation: 23

How to Dynamically change animation-name in CSS

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>

Upvotes: 1

Views: 2529

Answers (3)

Mihi
Mihi

Reputation: 204

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

Upvotes: 2

Matan Sanbira
Matan Sanbira

Reputation: 1513

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>

Upvotes: 3

Nijeesh Joshy
Nijeesh Joshy

Reputation: 1481

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>

Upvotes: 1

Related Questions