CSS Typewriter Animation

<!DOCTYPE html>
<html>
<head>
<!--================== Design Provide By Mystery Code(YouTube Channel) ==================-->

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{background:black;
margin-top:200px;
margin-left:200px;}
#typing {
  
			width: 0ch;
			color: white;
			float: left;
			font-family: sans-serif;
			font-weight:bold;
			font-size: 60px;
			overflow: hidden;
			white-space: nowrap;
			animation: typing 5s steps(22) 1s infinite alternate;
		}
        #typing span{
        color:red;}

		#crow {
			float: left;
      
      color: white;
			font-family: consolas;
			font-weight:bold;
			font-size: 60px;
			animation: crow 0.5s linear 0s infinite;
		}
		@keyframes typing {
			from {
				width: 0ch;
			}
			to {
				width: 22ch;
			}
		}
		@keyframes crow {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
</style>
</head>
<body>
<div id="typing">I AM A <span>WEB DESIGNER</span></div>
<div id="crow">|</div>
<script>

</script>

</body>
</html>
Editor is loading...