Issue
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 class="div-1">
<p id="text-1"> Text 1 </p>
</div>
Solution
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 class="div-1">
<p id="text-1"> Text 1 </p>
</div> You might need to change timing in order to you website.
Answered By - HamiD
