CSS animation to replace a text automatically

Question

I have 5 items like this CAT, DOG, ELEPHANT, HIPPO, LION.

I need to build an h1 text that automatically changes like this every 3 or 4 secs like this

if I'm CAT, then I'm not a DOG or ELEPHANT.

if I'm DOG, then I'm not CAT or ELEPHANT.

if I'm ELEPHANT, then I'm not CAT or DOG.

if I'm HIPPO, then I'm not ELEPHANT or LION.

if I'm LION, then I'm not ELEPHANT or HIPPO.

So whatever comes after I'm, cannot come in the rest of the sentence. Y and Z can be anything from the list.

<h1>If I'm X, then I'm not Y, and Z </h1>

Here X, Y, and Z change dynamically like this

X, Y, and Z simultaneously go up followed by the next possible text

I want to do it using CSS, because I'm new to programming, don't know Javacript and Jquery. What if there are only just 3 elements? A, B, C, if A comes first, then B and C can come in the following sentence — Newbie_developer, Nov 06 '22 at 09:48
[Can you use if/else conditions in CSS?] https://stackoverflow.com/questions/1129699/can-you-use-if-else-conditions-in-css) — Nicolas Tome, Nov 06 '22 at 09:54

score 5 · Accepted Answer · answered Nov 06 '22 at 11:13

CSS

There's no real programming in css, it's used to apply styling and visual effects.
If you want to randomly pick things from a list, you would normally use javascript for that.

You can fake it a bit, by predefining what you'll show up front. In the example below we've got a static list of animals.
It will cycle through the options. A keen eye will notice that it's the same list every time.

The animation

We have a wrapper with a css rule: overflow:hidden;
We capped the height to : height: 50px;

Inside the wrapper, there's a list of .box items.
Each box is set to have height: 50px;
Initially, the wrapper will only show the first box. because the other are hidden due to the overflow:hidden; rule.

We then move the list of boxes up with a transform: translateY(-__px) rule.
This wil give the impression that the text is scrolling up. Due to the overflow:hidden; rule on the wrapper, the boxes that scroll past the top will disappear.

The animation is stepped to linger on each box for a bit, and then continues to scroll.

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
}

#app {
  width: 100%;
  height: 100%;
  background: #1a2b45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
}

.static {
  color: #F9F9F9;
}

.spinner {
  background: #fafafa;
  height: 50px;
  overflow: hidden;
  border-radius: 5px;
  margin: 5px;
  color: #444;
}

.boxes {
  transform: translateY(0);
  transition: transform 1s ease-in-out;
  animation-name: slot-machine;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 15s;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  height: 50px;
  padding: 0 1rem;
}

@keyframes slot-machine {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-50px);
  }
  20% {
    transform: translateY(-50px);
  }
  25% {
    transform: translateY(-100px);
  }
  40% {
    transform: translateY(-100px);
  }
  45% {
    transform: translateY(-150px);
  }
  60% {
    transform: translateY(-150px);
  }
  65% {
    transform: translateY(-200px);
  }
  80% {
    transform: translateY(-200px);
  }
  85% {
    transform: translateY(-250px);
  }
  95% {
    transform: translateY(-250px);
  }
  97% {
    transform: translateY(10px);
  }
  98% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<div id="app">
  <div class="text">
    <div class="static">if i'm </div>
    <div class="spinner">
      <div class="boxes">
        <div class="box">?</div>
        <div class="box">CAT</div>
        <div class="box">DOG</div>
        <div class="box">ELEPHANT</div>
        <div class="box">HIPPO</div>
        <div class="box">LION</div>
      </div>
    </div>
    <div class="static"> then I'm not </div>
    <div class="spinner">
      <div class="boxes">
        <div class="box">?</div>
        <div class="box">DOG</div>
        <div class="box">ELEPHANT</div>
        <div class="box">HIPPO</div>
        <div class="box">LION</div>
        <div class="box">CAT</div>
      </div>
    </div>
    <div class="static"> or </div>
    <div class="spinner">
      <div class="boxes">
        <div class="box">?</div>
        <div class="box">HIPPO</div>
        <div class="box">LION</div>
        <div class="box">CAT</div>
        <div class="box">DOG</div>
        <div class="box">ELEPHANT</div>

      </div>
    </div>
  </div>
</div>

CSS animation to replace a text automatically

1 Answers1

CSS

The animation