I am building a bubble.io application and I want it to display a single word at a time. The word, let's say "Apple", should move from left to right of the page and repeatedly unless the word is clicked. When the word is clicked it should disappear and allow the next word, let's say "Orange", to appear and animate in the same direction or a different direction. This should be repeated for all the words under a single category in the bubble.io database.
I tried to implement the code below but there was no animation made.
<style>
.my-text {
display: inline-block;
animation: slide-left 0.5s ease forwards;
}
@keyframes slide-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-10px);
}
}
</style>
