Question 44421 in Html Question posted in
Some basic documentation can be found here.

Alternating text in pure css – Html

I want to use this animation on my own website. However, I’m unsure how to add a third line and got stuck on how to do so.

body {
  background-color: black;
  color: white;
  font-size: 100px;
}

h1 {
  font-size: 30px;
}

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_1,
.text_2 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after,
.text_2::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}

@keyframes text2 {
  0%,
  50%,
  100% {
    width: 0;
  }
  60%,
  90% {
    width: 21.2em;
  }
}

@keyframes text1 {
  0%,
  50%,
  100% {
    width: 0;
  }
  10%,
  40% {
    width: 17em;
  }
}

@keyframes caret {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
<h1>
  <span class="text_1">Fancy heading on your static web page</span><span class="text_2">What?? How does it change without JavaScript?</span>
</h1>
Tags:

2

Answers


  1. 0

    In the code in the question there are two phrases and each is given 50% of the animation time to go from zero to full width and back again to zero.

    Hence each has 50% of the time at 0 width and in their own 50% they spend a fifth of the time going from 0 to full width, then hold at full width for 3/5th of the time then spend the last fifth of their time going back to 0 width.

    If we add another phrase then each needs to be given 1/3rd of the overall time in which to go from 0 to full width and then back again.

    This means we have to reset the %s used by text1 and text2 as well as the newly introduced text3.

    Note: in this snippet I’ve used a variation of the second phrase as the third phrase simply so I didn’t have to work out an em length for the third phrase – it is the same in this case.

    However, the calculations done for the width of the phrases assume one knows the font being used and exactly how it is rendered on different systems. This might not always lead to a solution that works perfectly everywhere. For a true typewriter effect you might like to consider using a monospace font and set the widths in ch rather than em units.

    body {
  background-color: black;
  color: white;
  font-size: 100px;
}

h1 {
  font-size: 30px;
}

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_3 {
  animation: text3;
}

.text_1,
.text_2,
.text_3 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after,
.text_2::after. .text_3::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}

@keyframes text3 {
  0%,
  66.6666%,
  100% {
    width: 0;
  }
  73.3333%,
  93.3333% {
    width: 21.2em;
  }
}

@keyframes text2 {
  0%,
  33.3333%,
  66.6666%,
  100% {
    width: 0;
  }
  39.9999%,
  59.9999% {
    width: 21.2em;
  }
}

@keyframes text1 {
  0%,
  33.3333%,
  100% {
    width: 0;
  }
  6.6666%,
  26.6666% {
    width: 17em;
  }
}

@keyframes caret {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
    <h1><span class="text_1">Fancy heading on your static web page</span><span class="text_2">What?? How does it change without JavaScript?</span><span class="text_3">What?? without JavaScript How does it change?</span></h1>
    Login or Signup to reply.
  2. 0

    Just replicate what you have for text1 and text2

    To simplify handling of variable-length text, I have changed the maximum width to 100%. You may want to tune it to a more precise width, in em, of your actual text, but that might make it annoying if you want the text to be dynamic (i.e. different for different users or on different occasions, for example).

    Second, I have simplified the timing so that 0-30% is for the first line of text, 30-60% for the second, and 60-90% for the third.

    body {
  background-color: black;
  color: white;
  font-size: 100px;
}

h1 {
  font-size: 30px;
}

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_3 {
  animation: text3;
}

.text_1,
.text_2,
.text_3 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 30s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after,
.text_2::after,
.text_3::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}

@keyframes text3 {
  0%,
  60% {
    width: 0;
  }
  70% {
    width: 100%;
  }
  80% {
    width: 100%;
  }
  90%,
  100% {
    width: 0;
  }
}

@keyframes text2 {
  0%,
  30% {
    width: 0;
  }
  40% {
    width: 100%;
  }
  50% {
    width: 100%;
  }
  60%,
  100% {
    width: 0;
  }
}

@keyframes text1 {
  0% {
    width: 0;
  }
  10% {
    width: 100%;
  }
  20% {
    width: 100%;
  }
  30%,
  100% {
    width: 0;
  }
}

@keyframes caret {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
    <h1>
  <span class="text_1">Fancy heading on your static web page</span><span class="text_2">What?? How does it change without JavaScript?</span><span class="text_3">Third line</span>
</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search