Add multiple variable words and center the text

user_8093298 0
Viewed 120

In this animation where I simulate the typewriter (only html/css) I would like to add 4 more variable writings but I can't because I don't understand how to work with the keyframes. I tried but he writes several words at the same time.

The second problem is that I can't exactly put "Hi, i'm a" in the center and make it move to the left when it has to write the variable word. (example: https://codepen.io/sheikh_ishaan/pen/LYEOqjd)

.box_type{
  margin-left: auto;
  margin-right: auto;
  width: 30em;
}

h1.type {
  font-size: 30px;
  display:flex;
  align-items: baseline;
}

.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(5, end);
}

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

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

@keyframes caret {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
<div class="box_type">
  <h1 class="type">Hi, i'm a <span class="text_1">&nbsp;Graphic Designer</span><span class="text_2">&nbsp;Photographer</span></h1>
</div>

keyframe css-animations animation css html
2 Answers

.box_type{
  margin-left: auto;
  margin-right: auto;
  width: 30em;
}

h1.type {
  font-size: 30px;
  display:flex;
  align-items: baseline;
  justify-content: center;
}

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_3 {
  animation: text3;
}

.text_4 {
  animation: text4;
}

.text_1, .text_2, .text_3, .text_4 {
  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, .text_4::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(5, end);
}

@keyframes text1 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  5%, 20% {
    width: 8em;
  }
}

@keyframes text2 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  30%, 45% {
    width: 6.5em;
  }
}

@keyframes text3 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  
  55%, 70% {
    width: 6.75em;
  }
}

@keyframes text4 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  80%, 95% {
    width: 3em;
  }
}

@keyframes caret {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
<div class="box_type">
  <h1 class="type">Hi, i'm a 
  <span class="text_1">&nbsp;Graphic Designer</span>
  <span class="text_2">&nbsp;Photographer</span>
  <span class="text_3">&nbsp;Web developer</span>
  <span class="text_4">&nbsp;Artist</span>
  </h1>
</div>

The above is the answer to your question that how you can add more such words...

Well I am really bad at explaining things, but hoping that, you can understand the code with explanation below... If you face any confusion then please type it in comment box and go through my CSS code just as you reach a new step of explanation... EXPLANATION -

1) Divide your animation's duration in the equal percentages by number of words you need,

for ex- you first needed two words, so you did 0%, 50%, 100%, then you need 4 words, so type 0%, 25%, 50%, 75%, 100%, just as I did in my code.

2) Now, you have a range of duration, so animate it according to your elements by adding and subtracting a fixed value in that range in the second line of your animation code...

For ex- you used [ +10% and -10% ] for [0%, 50%, 100%], like- 0 & 40 and 60 & 90... similarly, I used [ +5% and -5% ] for [0%, 25%, 50%, 75%, 100%], like- 5 & 20 and 30 & 45 and 55 & 70 and 80 & 95 (all values are in percentage).

3) Then define classes to your tags which contain words and include them in common CSS stylings and add animation respectively to them by defining a unique animation for each one of them like-

.text_1 { animation: text1;}  
.text_2 { animation: text2;}  
.text_3 { animation: text3;}  
.text_4 { animation: text4;}

4) Run the above snippet... Your desired output is achieved...

user_136990270

Step 2 in detail

Usage - value of % to be added and subtracted defines the time for the cursor to change the word

(i) just as you have divided your duration by the no. of words you need, say 4 words, Then you have to allot a range for each class, just as I have allot 0%-25% to .text-1.

~meaning of step (i) - you are specifying the time limit for the animation of that particular word.

ii) Now add and subtract a fixed value in that range, like I am adding 5% to lower limit and subtracting 5% from upper limit, ex- (0+5)%, (25-5)% in the next line of @keyframes .text_1

ex- 

@keyframes text1 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  5%, 20% {
    width: 8em;
  }
}

~meaning of step (ii) - Your animation for that word will take place in the range of 5% - 20% of the total time... This addition and subtraction is required for smooth functioning of the animation...

(iii) Similarly, do the same for each class after specifying a allotted range to its duration.

example for .text_3 which takes 50% - 75%, so the limit for its smooth functioning is- (50+5)% - (75-5)% = 55% - 70% -

@keyframes text3 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }

  55%, 70% {
    width: 6.75em;
  }
}

Now, finally the code for 8 elements... Hoping you can understand it better now!!

.box_type{
  margin-left: auto;
  margin-right: auto;
  width: 30em;
}

h1.type {
  font-size: 30px;
  display:flex;
  align-items: baseline;
  justify-content: center;
}

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_3 {
  animation: text3;
}

.text_4 {
  animation: text4;
}

.text_5 {
  animation: text5;
}

.text_6 {
  animation: text6;
}

.text_7 {
  animation: text7;
}

.text_8 {
  animation: text8;
}

.text_1, .text_2, .text_3, .text_4, 
.text_5, .text_6, .text_7, .text_8 {
  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, .text_4::after, 
.text_5::after, .text_6::after, .text_7::after, .text_8::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(5, end);
}

@keyframes text1 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  2.5%, 10% {
    width: 8em;
  }
}

@keyframes text2 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  15%, 22.5% {
    width: 6.5em;
  }
}

@keyframes text3 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  
  27.5%, 35% {
    width: 6.75em;
  }
}

@keyframes text4 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  40%, 47.5% {
    width: 3em;
  }
}

@keyframes text5 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  52.5%, 60% {
    width: 4em;
  }
}

@keyframes text6 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  65%, 72.5% {
    width: 4em;
  }
}

@keyframes text7 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  77.5%, 85% {
    width: 4em;
  }
}

@keyframes text8 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  90%, 97.5% {
    width: 4em;
  }
}

@keyframes caret {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
<div class="box_type">
  <h1 class="type">Hi, i'm a 
  <span class="text_1">&nbsp;Graphic Designer</span>
  <span class="text_2">&nbsp;Photographer</span>
  <span class="text_3">&nbsp;Web developer</span>
  <span class="text_4">&nbsp;Artist</span>
  <span class="text_5">&nbsp;Word 5</span>
  <span class="text_6">&nbsp;Word 6</span>
  <span class="text_7">&nbsp;Word 7</span>
  <span class="text_8">&nbsp;Word 8</span>
  </h1>
</div>

If you think the that the animation is very fast, you can simply add more seconds to your animation, currently the value is 20s but I personally prefer 40s for eight words animation...

Please let me know if any query is still left.

Hoping that your doubt is resolved...
Regards,
Om Chaudhary

user_136990270
Related