Changing different CSS animations with JS

Vision: On “mouseenter” spin the letter and change the color. On second “mouseenter” spin the letter and change color back.

Problem: When changing class, second animation is not working.

const landingEl = document.getElementById("landing");
const landingText = document.getElementById("landing-text");
// line brake on dot
const landingFraze = `Lorem ipsum dolor sit amet consectetur adipisicing elit.`;

const spans = document.getElementsByTagName('span');



let letterList = [];
let text;

// rotate leter function
function rotate(ind) {
  let index = ind.path[0].id
  let spiningLeter = document.getElementById(index);
  
  if(!spiningLeter.classList.contains ('rotate') & !spiningLeter.classList.contains('unrotate')) {
    spiningLeter.classList.add('rotate');
  }
  else if (spiningLeter.classList.contains('unrotate')) {
    spiningLeter.classList.remove('unrotate');
    spiningLeter.classList.add('rotate');
    
  }
    else {
    spiningLeter.classList.replace('rotate', 'unrotate');
}
}




function everyLeter() {
  let text = landingFraze;
  // split fraze in sentences on dot
  let sentenceList = text.split(".");
  // adding css to every letter
  sentenceList.forEach((element, i) => {
    let div = document.createElement('div');
    // spliting every letter
    let list = element.split("");
    // creating new element and adding letter to it with css
    list.forEach((leter, index) => {
      let span = document.createElement("span");
      span.id = `${index}a${i}`;
      // event listener on mouse enter
      span.addEventListener('mouseenter', rotate);
      let leterP = document.createElement('p');
      // adding space between words
      if(leter === ' ') {
        leterP.style.marginLeft = '20px'
      }
      // add a dot at the end of the sentence
      if(list.length === index + 1){
        leterP.textContent = `${leter}.`;
     
      } else {
        leterP.textContent = leter;
        
      }
      // appending
      span.appendChild(leterP);
      div.appendChild(span);
      
  });
    // appending div  to landing
    landingText.appendChild(div);
  
  });
  
  
}

// functions

everyLeter();
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Roboto:wght@400;700&display=swap");

:root {
  --font-color: rgb(243, 14, 224);
}

.landing-text {
  font-family: "Luckiest Guy", cursive;
  flex-wrap: wrap;
  height: 100vh;
  font-size: 6vw;
  margin-top: 40vh;
  margin-left: 4rem;
}
.landing-text div{
    display: flex;
    max-height: 120px;
}

.rotate {  
    animation: rotate 2s  forwards;
    }
  
  
  @keyframes rotate {
    
    100% {
      
      transform: rotateY(720deg);
      color: var(--font-color);
    }
      
  };
  
  .unrotate {
    animation: unrotate 2s forwards;
    }
  @keyframes unrotate {
    100%{
  
        transform: rotateY(720deg);
      color: black;
  };
  }
<div class="landing" id='landing'>
                <div class ="landing-text" id="landing-text"></div>
            </div>

Vision: On “mouseenter” spin the letter and change the color. On second “mouseenter” spin the letter and change color back.

Problem: When changing class, second animation is not working.

Javscript

function rotate(ind) {
  let index = ind.path[0].id;
  let spiningLeter = document.getElementById(index);
  
  if(!spiningLeter.classList.contains ('rotate') & !spiningLeter.classList.contains('unrotate')) {
    spiningLeter.classList.add('rotate');
  }
  else if (spiningLeter.classList.contains('unrotate')) {
    spiningLeter.classList.remove('unrotate');
    spiningLeter.classList.add('rotate');
    
  }
    else {
    spiningLeter.classList.replace('rotate', 'unrotate');
}
}

CSS

.rotate {  
    animation: rotate 2s  forwards;
    }
  
@keyframes rotate {
    100% {
      transform: rotateY(360deg);
      color: rgb(26, 212, 2)}    
  };

.unrotate {
    animation: unrotate 2s forwards;
    }
@keyframes unrotate {
    100%{
      transform: rotateY(720deg);
      color: var(--font-color);
  };
  }

Answer

Try and specify the start state of each animation.

const landingEl = document.getElementById('landing')
const landingText = document.getElementById('landing-text')
// line brake on dot
const landingFraze = `Lorem ipsum dolor sit amet consectetur adipisicing elit.`

const spans = document.getElementsByTagName('span')

let letterList = []
let text

// rotate leter function
function rotate(ind) {
  let spiningLeter = ind.target

  if (!spiningLeter.classList.contains('rotate') &
    !spiningLeter.classList.contains('unrotate')
  ) {
    spiningLeter.classList.add('rotate')
  } else if (spiningLeter.classList.contains('unrotate')) {
    spiningLeter.classList.remove('unrotate')
    spiningLeter.classList.add('rotate')
  } else {
    spiningLeter.classList.replace('rotate', 'unrotate')
  }
}

function everyLeter() {
  let text = landingFraze
  // split fraze in sentences on dot
  let sentenceList = text.split('.')
  // adding css to every letter
  sentenceList.forEach((element, i) => {
    let div = document.createElement('div')
    // spliting every letter
    let list = element.split('')
    // creating new element and adding letter to it with css
    list.forEach((leter, index) => {
      let span = document.createElement('span')
      span.id = `${index}a${i}`
      // event listener on mouse enter
      span.addEventListener('mouseenter', rotate)
      let leterP = document.createElement('p')
      // adding space between words
      if (leter === ' ') {
        leterP.style.marginLeft = '20px'
      }
      // add a dot at the end of the sentence
      if (list.length === index + 1) {
        leterP.textContent = `${leter}.`
      } else {
        leterP.textContent = leter
      }
      // appending
      span.appendChild(leterP)
      div.appendChild(span)
    })
    // appending div  to landing
    landingText.appendChild(div)
  })
}

// functions

everyLeter()
:root {
  --font-color: rgb(243, 14, 224);
}

.landing-text {
  font-family: 'Luckiest Guy', cursive;
  font-size: 4vw;
}

.landing-text div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.rotate {
  animation: rotate 2s forwards;
}

@keyframes rotate {
  0% {
    color: black;
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(720deg);
    color: var(--font-color);
  }
}

.unrotate {
  animation: unrotate 2s forwards;
}

@keyframes unrotate {
  0% {
    color: var(--font-color);
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(0deg);
    color: black;
  }
}


/* For demo only */

span {
  margin: 4px;
  padding: 0;
  line-height: 0px;
}


/* ***** */
<div class="landing" id="landing">
  <div class="landing-text" id="landing-text"></div>
</div>