Put gif in Typewrite

Question

Hello, I would like to add a gif in front of a text using the Typewrite effect.

Css code:

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  width: 100%;
  color: #fff;
  font-family: 'Anonymous Pro', monospace;
  background-color: black;
  display: flex;
}

.line {
  position: relative;
  width: 0px;
  margin: auto;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}


/*Animação*/

.anim-typewriter {
  animation: typewriter 4s steps(13) 500ms infinite, blinkTextCursor 500ms steps(13) infinite normal;
}

@keyframes typewriter {
  0% {
    width: 0px;
  }
  10% {
    width: 0px;
  }
  25% {
    width: 160px;
  }
  75% {
    width: 160px;
  }
  90% {
    width: 0px;
  }
  100% {
    width: 0px;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, 0.75);
  }
  to {
    border-right-color: transparent;
  }
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  width: 100%;
  color: #fff;
  font-family: 'Anonymous Pro', monospace;
  background-color: black;
  display: flex;
}

.lines {
  position: relative;
  width: 0px;
  margin: auto;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}


/*Animação*/

.anim-typewriters {
  animation: typewriter 4s steps(44) 500ms infinite, blinkTextCursor 500ms steps(44) infinite normal;
}

@keyframes typewriter {
  0% {
    width: 0px;
  }
  10% {
    width: 0px;
  }
  25% {
    width: 160px;
  }
  75% {
    width: 160px;
  }
  90% {
    width: 0px;
  }
  100% {
    width: 0px;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, 0.75);
  }
  to {
    border-right-color: transparent;
  }
}

<p class="line anim-typewriter">BigBlack</p>

The GIF would stand there in front of where it is written Bigblack in the <p> (html) So he would slowly write the word Bigblack and then put the gif in front.

How can I do that?

Answer 1

Face just adjust the width of the animation on width within the @keyframes, and then put two more steps in the animation-steps corresponding to the image and the space and ready.

html {
  height: 100%;
  overflow: hidden;
}
body {
	height: 100%;
	width: 100%;
	color: #fff;
	font-family: 'Anonymous Pro', monospace;
	background-color: black;
	display: flex;
}
.line {
	position: relative;
	width: 0px;
	margin: auto;
	border-right: 2px solid rgba(255, 255, 255, 0.75);
	font-size: 180%;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;

}
/*Animação*/
.anim-typewriter {
	animation: typewriter 4s steps(15) 500ms infinite,
	blinkTextCursor 500ms steps(15) infinite normal;
}
@keyframes typewriter {
	0% {
		width: 0px;
	}
	10% {
		width: 0px;
	}
	25% {
		width: 280px;
	}
	75% {
		width: 280px;
	}
	90% {
		width: 0px;
	}
	100% {
		width: 0px;
	}
}
@keyframes blinkTextCursor {
	from {
		border-right-color: rgba(255, 255, 255, 0.75);
	}
	to {
		border-right-color: transparent;
	}
}

<p class="line anim-typewriter">
  <img src="https://placecage.com/36/36" alt=""> 
  BigBlack
</p>