CSS Input Text Animation - Typing Animation Effect

Compared with the previous CSS version, we can achieve many cool things with css3. For example, typing animations was not possible with older versions of CSS. Below we will bring you a small case to see how the cool typing animation is done.

The CSS code to implement the typing animation effect is as follows. You can copy it directly to your page to test the typing animation effect.

<div class="typing-slider">
  <p>Text slider with</p>
  <p>typing animation effect</p>
  <p>in pure CSS.</p>
</div>
<style>
	body {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #FFCC00;
	}
	@keyframes cursor {
		from,to {
			border-color: transparent;
		}
		50% {
			border-color: black;
		}
	}
	@keyframes typing {
		from {
			width: 100%;
		}
		90%,to {
			width: 0;
		}
	}
	@keyframes slide {
		33.33% {
			font-size: 3rem;
			letter-spacing: 3px;
		}
		to {
			font-size: 0;
			letter-spacing: 0;
		}
	}
	.typing-slider {
		font-family: Consolas, monospace;
		font-weight: bold;
		text-align: center;
		white-space: nowrap;
	}
	.typing-slider p {
		position: relative;
		display: inline;
		font-size: 0;
		text-transform: uppercase;
		letter-spacing: 0;
		animation: slide 15s step-start infinite;
	}
	.typing-slider p::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		border-left: 3px solid black;
		background-color: #FFCC00;
		animation: typing 5s infinite, cursor 1s infinite;
	}
	.typing-slider p:nth-child(1) {
		animation-delay: 0s;
	}
	.typing-slider p:nth-child(1)::after {
		animation-delay: 0s;
		animation-timing-function: steps(16), step-end;
	}
	.typing-slider p:nth-child(2) {
		animation-delay: 5s;
	}
	.typing-slider p:nth-child(2)::after {
		animation-delay: 5s;
		animation-timing-function: steps(23), step-end;
	}
	.typing-slider p:nth-child(3) {
		animation-delay: 10s;
	}
	.typing-slider p:nth-child(3)::after {
		animation-delay: 10s;
		animation-timing-function: steps(12), step-end;
	}
</style>