Pure CSS Typing Animation Effects

Animating CSS Features To complete the typewriter effect, the default CSS property is 0% to 100% animated. The cursor is basically a border at the right. The flashing effect is done by extremely animating the border-color property, from a solid color to a simple one.

Some use JavaScript, which can sometimes be friendly (literally attaching letters seems like a more practical typewriter) and never (a potential accessibility concern).

This tutorial is done by Rau. The previous tutorial is how you create CSS Social Card Hover Effect Animation.

HTML

<div class="wrapper">
  <h1>Hello CSSPOINTS!!!<span> </span></h1>
</div>

CSS

body {
	background: #1d1f20;
}
/* Basic styles */
h1 {
	position: relative;
	float: left;
	color: #d7b94c;
	font-family: 'Inconsolata', Consolas, monospace;
	font-size: 4em;
}
h1 span {
	position: absolute;
	top: 0;
	right: 0;
	background: #1d1f20;
	width: 100%;
	border-left: .1em solid transparent;
	-webkit-animation: typing 3s steps(16) forwards,
		cursor 1s infinite;
	animation: typing 3s steps(16) forwards,
		cursor 1s infinite;
}
/* Animation */
@-webkit-keyframes typing {
	from {
		width: 100%;
	}
	to {
		width: 0;
	}
}
@-webkit-keyframes cursor {
	50% {
		border-color: white;
	}
}
@keyframes typing {
	from {
		width: 100%;
	}
	to {
		width: 0;
	}
}
@keyframes cursor {
	50% {
		border-color: white;
	}
}

2 Comments

  1. F*ckin¦ awesome issues here. I am very glad to see your post. Thank you a lot and i am having a look ahead to touch you. Will you please drop me a e-mail?

Leave a Reply