I added this effect to my website and here's how I did it

the HTML is really simple

<div class="scrolling">
    <p>i like</p>
    <p id="element">CSS</p>
</div>

and for the CSS part, we have this

@keyframes scroll {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    20% {
        transform: translateY(0px);
        opacity: 1;
    }

    80% {
        transform: translateY(0px);
        opacity: 1;
    }

    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.scrolling {
  margin-top: 20px;
  display: flex;
  gap: 4px;
}

#element {
  width: 30px;
  animation: scroll 4s ease-in-out infinite;
}

#element span {
  font-size: 14px;
  color: black;
  padding: 2px;
  border-radius: 3px;
}

this will create the text part that is supposed to scroll to an infinite loop without changing its value. We're gonna make the text change using JavaScript

const element = document.getElementById("element");
const words = [
    "JavaScript",
    "TypeScript",
    "Python",
    "HTML",
    "SQL",
    "CSS",
    "Svelte",
    "React",
];

let currentWord = 0;

element.addEventListener(
    "animationiteration",
    () => {
        currentWord++;
        if (currentWord === words.length) currentWord = 0;
        element.innerHTML = words[currentWord];
    },
    false
);

you should end up with something like this

you can now customize it using CSS however you want.

Here is a repl with the code