Change text on a div when it rotates-CodePudding

Does anyone have any ideia on how i can make a text thats inside a

in a div, change its content when it rotates?

This is what the code is currently doing, im able to rotate my text but i have no ideia on how to change whats written as soon as the animation finishes. Also, i'd like to find a way to make this animation endless, so the text is always changing, everytime it rotates.

Appreciate the help!!

#text-1 {
    text-align: center;
    width: 150px;
    height: 100px;
    animation:rotateAnimation 1s alternate-reverse;
}

@keyframes rotateAnimation {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(225deg);
    }
}

<body>

    <div >
        <p id="text-1"> Text 1 </p>
    </div>

CodePudding user response：

Firstly, to make your animation run forever, you are going to want to set the animation-iteration-count property, which can be done in shorthand like so:

animation: rotateAnimation 1s alternate infinite;

Next, because your animation is looping forever, you will want to use the setInterval() function in JavaScript to run some code that changes the text on a regular interval. This will also allow you to stop the text changing using the clearInterval() function.

Because your animation is set to alternate and has a time of 1 second for the animation, it actually takes 2 seconds to complete your animation (I'm not sure if that is your goal but it is what you provided).

I'm also using setTimeout() to add a delay before the text is initially changed. Again, a lot of this is probably going to come down to how you want to tweak the animation.

let interval;
setTimeout(() => {
  _ChangeText();
  interval = setInterval(_ChangeText, 2000);
}, 200);

const _ChangeText = () => {
  document.querySelector("#text-1").innerText = (document.querySelector("#text-1").innerText == "Text 1") ? "Text 2" : "Text 1";
}

#text-1 {
  text-align: center;
  width: 150px;
  height: 100px;
  animation: rotateAnimation 1s alternate infinite;
}

@keyframes rotateAnimation {
  from {
    transform: rotateY(45deg);
  }

  to {
    transform: rotateY(225deg);
  }
}

<div >
  <p id="text-1"> Text 1 </p>
</div>

CodePudding user response：

Using Javascript:

function myFunction(){
  document.querySelector("#text-1").innerHTML = "Wooo";
}

setTimeout(myFunction, 800)

#text-1 {
    text-align: center;
    width: 150px;
    height: 100px;
    animation:rotateAnimation 1s alternate-reverse;
}

@keyframes rotateAnimation {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(225deg);
    }
}

    <div >
        <p id="text-1"> Text 1 </p>
    </div>

You might need to change timing in order to you website.

CodePudding user response：

Here is a version using another keyframe with a pseudo-element.

#text-1 {
  text-align: center;
  width: 150px;
  height: 100px;
  animation: rotateAnimation 1s alternate-reverse;
}

@keyframes rotateAnimation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(225deg);
  }
}

#text-1:after {
  content: "";
  animation: changeText 1.5s linear;
  animation-fill-mode: forwards;
}

@keyframes changeText {
  0% {
    content: "Text 1";
  }
  100% {
    content: "Text 2";
  }
}

<div >
  <p id="text-1"></p>
</div>

Here is a version with a longer duration. To make it longer just add more intervals.

#text-1 {
  text-align: center;
  width: 150px;
  height: 100px;
  animation: rotateAnimation 10s alternate;
  animation-fill-mode: forwards;
}

@keyframes rotateAnimation {
  0% {
    transform: rotateY(0deg);
  }
  10% {
    transform: rotateY(225deg);
  }
  20% {
    transform: rotateY(0deg);
  }
  30% {
    transform: rotateY(225deg);
  }
  40% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(225deg);
  }
  60% {
    transform: rotateY(0deg);
  }
  70% {
    transform: rotateY(225deg);
  }
  80% {
    transform: rotateY(0deg);
  }
  90% {
    transform: rotateY(225deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

#text-1:after {
  content: "";
  animation: changeText 10s alternate;
  animation-fill-mode: forwards;
}

@keyframes changeText {
  0% {
    content: "Text 1";
  }
  10% {
    content: "Text 2";
  }
  20% {
    content: "Text 3";
  }
  30% {
    content: "Text 4";
  }
  40% {
    content: "Text 5";
  }
  50% {
    content: "Text 6";
  }
  60% {
    content: "Text 7";
  }
  70% {
    content: "Text 8";
  }
  80% {
    content: "Text 9";
  }
  90% {
    content: "Text 10";
  }
  100% {
    content: "Text 11";
  }
}

<div >
  <p id="text-1"></p>
</div>