How do I make text in the middle of a sentence scroll?

How do I make text in the middle of a sentence scroll?

Problem Description:

I wanted to make a landing page for fun, and see how to make it look better, and I figured that I could make a sentence with spinning text in the middle. I’ve added a GIF to let you guys see what I want it to look like. I did see another post on here similar to mine, but the person that replied had it messed up slightly

I tried using CSS scrolling text, but that made the entire sentence start moving. I tried putting the beginning and end in different DIVs but then they were all seperated.

Solution – 1

It needs to be independent element but you can inline-block it. Within this also overflow:hidden element will be a bigger element to be scrolled inside.

h1 {
  display: flex;
  height: 40px;
  /* to center: */
  justify-content: center;

.scroll-container {
  text-align: center;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 40px;
  /* border: 1px solid red; */
  margin-left: 10px;
  margin-right: 10px;

.text-inside .item {
  height: 40px;

.text-inside {
  margin-top: 0;
  transition: 500ms;
  animation: 3s infinite test;

@keyframes test {
  0% {
    margin-top: 0;
  25% {
    margin-top: 0;
  50% {
    margin-top: -40px;
  100% {
    margin-top: -80px;
<div style="inline-block">
<h1>Welcome to
  <div class="scroll-container">
    <div class="text-inside">
      <div class="item">Paris</div>
      <div class="item">Frankfurt</div>
      <div class="item">Milano</div>
  </div>, Joshua
Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.