Typewriter Effect with CSS Animation

CSS ANIMATION EXAMPLES WITH CODE
CSS ANIMATION EXAMPLES WITH CODE

CSS Animation

CSS animations are one o the amazing things that CSS3 has brought in. It is very easy to animate test borders etc. with just pure CSS code examples. Before the introduction of CSS3, things like a typewriter text animation could be only possible through JavaScript of Jquery. But now these kinds of effects can be achieved quite easily with CSS animations.

CSS ANIMATION EXAMPLES WITH CODE

CSS ANIMATION EXAMPLES WITH CODE

In this post we are going to share a CSS animation shorthand code of typewriter effect. It mimics a typewriter writing style effect. It is pure CSS code no JavaScript or any other programming language is used. We have used CSS animation with @keyframes to get the best and desired result. See how typewriter effect in CSS is made and how it looks like.

Typewriter Effect with CSS Animation Code

Here is the CSS animation typewriter effect code example:

<!DOCTYPE html>
<html>
<head>
	<title>Animated text Pure CSS</title>
</head>
<body>

</body>
<h1 data-text="Learn to code with HowToCode.pk"> Learn to code with HowToCode.pk </h1>
</html>

Now use the CSS animation code below in the head section of use and external style sheet. Read types of CSS here.


    <style type="text/css">
		h1{
			transform: translate(-50%, -50%);
			text-transform: uppercase;
			font-family: consolas;
			position: absolute;
			top: 50%;
			left: 50%;
            color: transparent;
		}
		h1:before{
			content: attr(data-text);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: #000;
			overflow:  hidden;
			border-right: 1px solid red;
			animation: type 10s steps(38) infinite;
			white-space: nowrap;;
		}
		@keyframes type{
			0%{
				width: 0;
			}
			50%{
				width: 100%;
			}
			100%{
				width: 0%;
			}
		}
	</style>


Hope you would like this code. Please do comment and give suggestions to improve the site.

Comments