10+ CSS Typing Text Effect Examples

This post contains a total of 10+ CSS Typing Text Effect Examples with Source Code. All these Typing Text Effects are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Typing Text Effect Examples

1. Typing Text Animation

Made by Will Moyer. Source

<!DOCTYPE html>
<html lang='en' class=''>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <style class="INLINE_PEN_STYLESHEET_ID">
    * {
  -webkit-box-sizing: border-box; /* Android ≀ 2.3, iOS ≀ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}

body, html {
    font-family: 'Menlo', monospace; 
    background-color: #eee;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin: 0;
    margin-bottom: 1.5rem;
}


.input-text {
    background: #fff;
    overflow: hidden;
    width: 440px;
    margin: 0 auto;
    margin-top: 10rem;
    padding: .75rem 1rem;
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 2px rgba(0,0,0,.1);
}


/* Animation stuff */


.message {
    position: relative;
    float: left;
    margin: 0;
    font-size: 2rem;
    letter-spacing: 0px;
}

.message span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    background: #fff;
    border-left: 4px solid #167ff0;

    -webkit-animation-name: typing, blinking;
    -webkit-animation-duration: 5s, 1s;
    -webkit-animation-iteration-count: 1, infinite;
    -webkit-animation-timing-function: steps(21,end), steps(1,end);


}

@-webkit-keyframes typing {
  0%   { width: 100%; }
  100% { width: 0; }
}

@-webkit-keyframes blinking {
  0%   { border-color: transparent; }
  50% { border-color: #167ff0; }
  100% { border-color: transparent; }
}
  </style>
  </script>
</head>
<body>
   <div class="input-text">
   <p class="message">Chiang Mai, Thailand&nbsp;<span></span>
   </p>
   
</div>
</body>
</html>

2. CSS Typing animation

Made by RaΓΊl Barrera. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #1d1f20;
}

h1 {
  font-family: "Inconsolata", Consolas, monospace;
  font-size: 4em;
  color: #d7b94c;
}

.typing {
  position: relative;
}
.typing::after {
  content: "|";
  position: absolute;
  right: 0;
  width: 100%;
  color: white;
  background: #1d1f20;
  -webkit-animation: typing 4s steps(16) forwards, caret 1s infinite;
          animation: typing 4s steps(16) forwards, caret 1s infinite;
}

@-webkit-keyframes typing {
  to {
    width: 0;
  }
}

@keyframes typing {
  to {
    width: 0;
  }
}
@-webkit-keyframes caret {
  50% {
    color: transparent;
  }
}
@keyframes caret {
  50% {
    color: transparent;
  }
}
</style>
</head>
<body>
  <h1 class="typing">Hello Codepen!!!</h1>
</body>
</html>

3. Auto Type! (Pure CSS)

Made by Mampel. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

h1 { 
	font: bold 300% Consolas, Monaco, monospace;
	border-right: .1em solid black;
	width: 16.5em; 
	width: 21ch;
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
	-webkit-animation: typing 7s steps(21, end),
	           blink-caret .5s step-end infinite alternate;
}
</style>
</head>
<body>
  <h1>New Mampel is Coming!</h1>
<iframe src="https://mampel.ir/" frameborder="0" style="width:0px;height:0px;border:0px"></iframe>
</body>
</html>

4. Terminal Style Loading Screen

Made by James Barnett. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=VT323'>  
<style>
body { background-color: black; }

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

p { 
  margin: 50px auto;
  width: 600px;
  
  font: bold 90px 'courier new', consolas, monaco,  monospace;
  color: green;
  
  border-right: 6px solid;
  overflow: hidden;
  animation: typing 11s steps(11, end) infinite, /* # of steps = # of chars */
  blink-caret 1s step-end infinite alternate;
}

span { letter-spacing: -10px; }
</style>
</head>
<body>
  <p>Loading<span>...</span></p>
</body>
</html>

5. Text slider with typing animation in pure CSS

Made by Adam LewiΕ„ski. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<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.3333333333% {
    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>
</head>
<body>
  <div class="typing-slider">
  <p>Text slider with</p>
  <p>typing animation effect</p>
  <p>in pure CSS.</p>
</div>
</body>
</html>

6. Typing Effect using CSS3 Animation

Made by Jonathan Marzullo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@-webkit-keyframes typing {
  from {
    width: 0
  }
  to {
    width: 14.17em
  }
}

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 14.17em
  }
}

@-webkit-keyframes caret {
  from, to {
    border-color: transparent
  }
  50% {
    border-color: black
  }
}

@keyframes caret {
  from, to {
    border-color: transparent
  }
  50% {
    border-color: black
  }
}

body {
  font-family: Consolas;
  font-size:16px;
}

h1 {
  font-size: 150%;
  width: 14.1em;
  white-space: nowrap;
  overflow: hidden;
  border-right: .1em solid #333;
  -webkit-animation: typing 13s steps(26, end), caret 0.9s step-end infinite;
  animation: typing 13s steps(26, end), caret 0.9s step-end infinite;
}
</style>
</head>
<body>
  <h1>Typing fx by jonathan.....</h1>
</body>
</html>

7. Editor Illustration

Made by Klare. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body {
  height: 95%;
}

body {
  background: linear-gradient(135deg, #000111 0%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.illustration-editor {
  margin-top: -2rem;
  margin-right: -10rem;
  display: grid;
  grid-template-rows: 24px auto;
  justify-items: center;
  position: relative;
}

.code {
  position: absolute;
  width: 290px;
  height: 145px;
  background: #1D1E22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  z-index: 5;
}
.code header {
  display: grid;
  grid-template-columns: 36px auto 36px;
  align-items: center;
}
.code header svg {
  margin: 10px;
}
.code header h1 {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: #C5C8D4;
  margin: 0;
}
.code-html {
  left: -100px;
  top: 40px;
}
.code-css {
  left: -25px;
  top: 200px;
}
.code-js {
  left: -175px;
  top: 360px;
}
.code .code-content {
  margin: 0 10px 10px;
  color: white;
}
.code .code-content .c-r {
  color: #A88038;
}
.code .code-content .c-o {
  color: #DE7300;
}
.code .code-content .c-y {
  color: #E1CA72;
}
.code .code-content .c-g {
  color: #74B087;
}
.code .code-content .c-p {
  color: #9F8198;
}
.code .code-content .c-b {
  color: #7A99AD;
}
.code .code-content .c-c {
  color: #666666;
}
.code-css .code-content code .line-1 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-2 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-3 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-4 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-5 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-1 {
  animation: typing-1 3s 0s steps(30, end) forwards, cursor 1s linear 0s 3;
}
.code-css .code-content code .line-2 {
  animation: typing-2 3s 3s steps(30, end) forwards, cursor 1s linear 3s 3;
}
.code-css .code-content code .line-3 {
  animation: typing-3 3s 6s steps(30, end) forwards, cursor 1s linear 6s 3;
}
.code-css .code-content code .line-4 {
  animation: typing-4 3s 9s steps(30, end) forwards, cursor 1s linear 9s 3;
}
.code-css .code-content code .line-1, .code-css .code-content code .line-3, .code-css .code-content code .line-4 {
  animation-duration: 1s;
  animation-timing-function: steps(10, end);
}
.code-css .code-content code .line-5 {
  border-color: transparent;
  animation: typing-5 3s 12s steps(30, end) forwards, cursor-persist 1s linear 12s infinite;
}
.code-css .code-content code .line-2 {
  margin-left: 2rem;
}
.code-css .code-content code .line-3, .code-css .code-content code .line-4, .code-css .code-content code .line-5 {
  margin-left: 4rem;
}

.editor-block {
  position: relative;
  display: block;
  width: 500px;
  height: 421px;
  background: linear-gradient(109.61deg, #4C4F5A 4.26%, #202125 84.84%);
  border-radius: 10px;
}

@keyframes typing-1 {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}
@keyframes typing-2 {
  from {
    width: 0;
  }
  to {
    width: 220px;
  }
}
@keyframes typing-3 {
  from {
    width: 0;
  }
  to {
    width: 70px;
  }
}
@keyframes typing-4 {
  from {
    width: 0;
  }
  to {
    width: 75px;
  }
}
@keyframes typing-5 {
  from {
    width: 0;
  }
  to {
    width: 141px;
  }
}
@keyframes cursor {
  from, to, 20%, 80% {
    border-color: transparent;
  }
  25%, 75% {
    border-color: white;
  }
}
@keyframes cursor-persist {
  from, 45% {
    border-color: transparent;
  }
  50%, to {
    border-color: white;
  }
}
</style>
</head>
<body>
  <div class="illustration-editor">
  <div class="code-blocks">
    <div class="code code-html">
      <header>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9999 6.675L13.1999 6.075C12.9999 5.975 12.8999 5.775 12.9999 5.675L13.8999 3.975C14.4999 2.775 13.1999 1.475 11.9999 2.075L10.2999 2.975C10.1999 3.075 9.9999 2.975 9.8999 2.775L9.2999 0.975C8.8999 -0.325 7.0999 -0.325 6.6999 0.975L6.0999 2.775C5.9999 2.975 5.7999 3.075 5.6999 2.975L3.9999 2.075C2.7999 1.475 1.4999 2.775 2.0999 3.975L2.9999 5.675C3.0999 5.775 2.9999 5.975 2.7999 6.075L0.999902 6.675C-0.300098 7.075 -0.300098 8.975 0.999902 9.375L2.7999 9.975C2.9999 9.975 3.0999 10.175 2.9999 10.275L2.0999 11.975C1.4999 13.175 2.7999 14.475 3.9999 13.875L5.6999 12.975C5.8999 12.875 6.0999 12.975 6.0999 13.175L6.6999 14.975C7.0999 16.275 8.9999 16.275 9.3999 14.975L9.9999 13.175C10.0999 12.975 10.2999 12.875 10.3999 12.975L12.0999 13.875C13.2999 14.475 14.5999 13.175 13.9999 11.975L12.9999 10.275C12.8999 10.075 12.9999 9.875 13.1999 9.875L14.9999 9.275C16.2999 8.875 16.2999 7.075 14.9999 6.675ZM7.9999 10.375C6.6999 10.375 5.5999 9.275 5.5999 7.975C5.5999 6.675 6.6999 5.575 7.9999 5.575C9.2999 5.575 10.3999 6.675 10.3999 7.975C10.3999 9.275 9.2999 10.375 7.9999 10.375Z" fill="#4C4F5A"/></svg>
<h1>HTML</h1>
        <svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.7089 7.65105L14.8704 2.02908C15.1112 1.80937 15.2528 1.51212 15.2528 1.18902C15.2528 0.865913 15.1112 0.56866 14.8704 0.348951C14.6296 0.129241 14.3038 0 13.9497 0C13.5956 0 13.2698 0.129241 13.029 0.348951L7.75989 5.1567L2.49077 0.348951C2.24998 0.129241 1.9242 0 1.57009 0C1.21598 0 0.890202 0.129241 0.649409 0.336026C0.380287 0.568659 0.252808 0.878837 0.252808 1.18902C0.252808 1.48627 0.380286 1.78352 0.621079 2.02908C2.23581 3.51535 6.42844 7.3538 6.71173 7.6252L6.74006 7.65105C7.24998 8.11632 8.19898 8.11632 8.7089 7.65105Z" fill="#4C4F5A"/></svg>
      </header>
      <div class="code-content">
        <code>
          <span class="c-r">&lt;div</span> <span class="c-y">class</span><span class="c-w">=</span><span class="c-g">"rect"</span><span class="c-r">&gt;&lt;/div&gt;</span></div>
        </code>
      </div>
    </div>
    <div class="code code-css">
      <header>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9999 6.675L13.1999 6.075C12.9999 5.975 12.8999 5.775 12.9999 5.675L13.8999 3.975C14.4999 2.775 13.1999 1.475 11.9999 2.075L10.2999 2.975C10.1999 3.075 9.9999 2.975 9.8999 2.775L9.2999 0.975C8.8999 -0.325 7.0999 -0.325 6.6999 0.975L6.0999 2.775C5.9999 2.975 5.7999 3.075 5.6999 2.975L3.9999 2.075C2.7999 1.475 1.4999 2.775 2.0999 3.975L2.9999 5.675C3.0999 5.775 2.9999 5.975 2.7999 6.075L0.999902 6.675C-0.300098 7.075 -0.300098 8.975 0.999902 9.375L2.7999 9.975C2.9999 9.975 3.0999 10.175 2.9999 10.275L2.0999 11.975C1.4999 13.175 2.7999 14.475 3.9999 13.875L5.6999 12.975C5.8999 12.875 6.0999 12.975 6.0999 13.175L6.6999 14.975C7.0999 16.275 8.9999 16.275 9.3999 14.975L9.9999 13.175C10.0999 12.975 10.2999 12.875 10.3999 12.975L12.0999 13.875C13.2999 14.475 14.5999 13.175 13.9999 11.975L12.9999 10.275C12.8999 10.075 12.9999 9.875 13.1999 9.875L14.9999 9.275C16.2999 8.875 16.2999 7.075 14.9999 6.675ZM7.9999 10.375C6.6999 10.375 5.5999 9.275 5.5999 7.975C5.5999 6.675 6.6999 5.575 7.9999 5.575C9.2999 5.575 10.3999 6.675 10.3999 7.975C10.3999 9.275 9.2999 10.375 7.9999 10.375Z" fill="#4C4F5A"/></svg>
<h1>CSS</h1>
        <svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.7089 7.65105L14.8704 2.02908C15.1112 1.80937 15.2528 1.51212 15.2528 1.18902C15.2528 0.865913 15.1112 0.56866 14.8704 0.348951C14.6296 0.129241 14.3038 0 13.9497 0C13.5956 0 13.2698 0.129241 13.029 0.348951L7.75989 5.1567L2.49077 0.348951C2.24998 0.129241 1.9242 0 1.57009 0C1.21598 0 0.890202 0.129241 0.649409 0.336026C0.380287 0.568659 0.252808 0.878837 0.252808 1.18902C0.252808 1.48627 0.380286 1.78352 0.621079 2.02908C2.23581 3.51535 6.42844 7.3538 6.71173 7.6252L6.74006 7.65105C7.24998 8.11632 8.19898 8.11632 8.7089 7.65105Z" fill="#4C4F5A"/></svg>
      </header>
      <div class="code-content">
        <code>
          <p class="line-1"><span class="c-y">.rect</span> <span>{</span></p><br/><p class="line-2"><span class="c-p">background</span><span>:</span> <span class="c-y">linear-gradient</span>( </p><br/><p class="line-3"><span class="c-o">-119deg</span>,</p><br/><p class="line-4"><span class="c-y">$gray</span> <span class="c-o">0%</span>,</p><br/><p class="line-5"><span class="c-y">$dark-gray</span> <span class="c-o">100%</span>);}</p>
        </code>
      </div>
    </div>
    <div class="code code-js">
      <header>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9999 6.675L13.1999 6.075C12.9999 5.975 12.8999 5.775 12.9999 5.675L13.8999 3.975C14.4999 2.775 13.1999 1.475 11.9999 2.075L10.2999 2.975C10.1999 3.075 9.9999 2.975 9.8999 2.775L9.2999 0.975C8.8999 -0.325 7.0999 -0.325 6.6999 0.975L6.0999 2.775C5.9999 2.975 5.7999 3.075 5.6999 2.975L3.9999 2.075C2.7999 1.475 1.4999 2.775 2.0999 3.975L2.9999 5.675C3.0999 5.775 2.9999 5.975 2.7999 6.075L0.999902 6.675C-0.300098 7.075 -0.300098 8.975 0.999902 9.375L2.7999 9.975C2.9999 9.975 3.0999 10.175 2.9999 10.275L2.0999 11.975C1.4999 13.175 2.7999 14.475 3.9999 13.875L5.6999 12.975C5.8999 12.875 6.0999 12.975 6.0999 13.175L6.6999 14.975C7.0999 16.275 8.9999 16.275 9.3999 14.975L9.9999 13.175C10.0999 12.975 10.2999 12.875 10.3999 12.975L12.0999 13.875C13.2999 14.475 14.5999 13.175 13.9999 11.975L12.9999 10.275C12.8999 10.075 12.9999 9.875 13.1999 9.875L14.9999 9.275C16.2999 8.875 16.2999 7.075 14.9999 6.675ZM7.9999 10.375C6.6999 10.375 5.5999 9.275 5.5999 7.975C5.5999 6.675 6.6999 5.575 7.9999 5.575C9.2999 5.575 10.3999 6.675 10.3999 7.975C10.3999 9.275 9.2999 10.375 7.9999 10.375Z" fill="#4C4F5A"/></svg>
<h1>JS</h1>
        <svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.7089 7.65105L14.8704 2.02908C15.1112 1.80937 15.2528 1.51212 15.2528 1.18902C15.2528 0.865913 15.1112 0.56866 14.8704 0.348951C14.6296 0.129241 14.3038 0 13.9497 0C13.5956 0 13.2698 0.129241 13.029 0.348951L7.75989 5.1567L2.49077 0.348951C2.24998 0.129241 1.9242 0 1.57009 0C1.21598 0 0.890202 0.129241 0.649409 0.336026C0.380287 0.568659 0.252808 0.878837 0.252808 1.18902C0.252808 1.48627 0.380286 1.78352 0.621079 2.02908C2.23581 3.51535 6.42844 7.3538 6.71173 7.6252L6.74006 7.65105C7.24998 8.11632 8.19898 8.11632 8.7089 7.65105Z" fill="#4C4F5A"/></svg>
      </header>
      <div class="code-content">
        <code>
          <span class="c-y">var</span> <span class="c-b">colors</span> = [<span class="c-g">β€œ#74B087”</span>, <span class="c-g">β€œ#DE7300”</span>, <span class="c-g">β€œ#74B087”</span>];<br/><br/>
          <span class="c-c">// Do the thing</span><br/>
          <span class="c-y">function</span> <span class="c-b">animate</span>() {}
        </code>
    </div>
  </div>
  <div class="editor-block"></div>
</div>
</body>
</html>
 

8. Pure CSS Typing Animation

Made by Stephanie Eckles. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Rosario:700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-color: #f7f3ff;
  color: slateblue;
  font-family: Rosario, sans-serif;
}

h1 {
  font-size: 4.5rem;
  text-align: center;
}

.type-animation {
  display: inline-flex;
  width: 0;
  overflow: hidden;
  padding-right: 0.08em;
  position: relative;
}
.type-animation:after {
  content: "";
  background: #f7f3ff;
  position: absolute;
  right: 0;
  top: -0.05em;
  bottom: -0.05em;
  width: 0.08em;
  border-right: 2px solid transparent;
}
.type-animation.animating {
  -webkit-animation: type 1620ms;
          animation: type 1620ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.type-animation.animating:after {
  -webkit-animation: cursor 320ms 8.625 ease-in-out;
          animation: cursor 320ms 8.625 ease-in-out;
}

@-webkit-keyframes cursor {
  0%, 100% {
    border-color: #f7f3ff;
  }
  50% {
    border-color: #241b5b;
  }
  100% {
    width: 0;
  }
}

@keyframes cursor {
  0%, 100% {
    border-color: #f7f3ff;
  }
  50% {
    border-color: #241b5b;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes type {
  11.1111111111% {
    width: 0.49em;
  }
  22.2222222222% {
    width: 0.98em;
  }
  33.3333333333% {
    width: 1.47em;
  }
  44.4444444444% {
    width: 1.96em;
  }
  55.5555555556% {
    width: 2.45em;
  }
  66.6666666667% {
    width: 2.94em;
  }
  77.7777777778% {
    width: 3.43em;
  }
  88.8888888889% {
    width: 3.92em;
  }
  100% {
    width: 3.92em;
    padding-right: 0;
  }
}
@keyframes type {
  11.1111111111% {
    width: 0.49em;
  }
  22.2222222222% {
    width: 0.98em;
  }
  33.3333333333% {
    width: 1.47em;
  }
  44.4444444444% {
    width: 1.96em;
  }
  55.5555555556% {
    width: 2.45em;
  }
  66.6666666667% {
    width: 2.94em;
  }
  77.7777777778% {
    width: 3.43em;
  }
  88.8888888889% {
    width: 3.92em;
  }
  100% {
    width: 3.92em;
    padding-right: 0;
  }
}
</style>
</head>
<body>
  <h1>My <span class="type-animation animating">Excellent</span> Website</h1>

</body>
</html>

9. I code

Made by Daniel Stancu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css'>
<style>
* { box-sizing: border-box; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; tap-highlight-color:rgba(0,0,0,0); }
body {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #F0F0F0;
  font-family: Courier, monospace;
  font-style: normal;
  font-weight: 100;
  color: #202020;
  font-smoothing: antialiased;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 20em;
  width: 100%;
  height: 10em;
  margin: -5em -10em;
  text-align: center;
}
a { 
  text-decoration: none;
  color: inherit;
}

h1 a {
  position: relative;
  display: block;
  overflow: hidden;
  opacity: 0;
  width: 1em;
  height: 1em;
  margin: 0 auto;
  background-color: #303132;
  font-size: 3em;
  line-height: 3em;
  color: transparent;
  border-radius: 50%;
  border: 0em solid #39F;
  transition: all .15s ease-in-out;
  animation: logo .25s ease-out 2.4s 1 normal forwards;
}

h1 a:hover, h1 a:focus { background-color: #39F; }
h1 a:active { transform: scale(.8); }

@keyframes logo {
  0%   { transform: rotate(25deg) scale(.01); opacity: 0; }
  70%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

h1 em {
  position: absolute;
  display: block;
  top: .5em;
  left: .4375em;
  font-size: .5em;
  line-height: 1em;
  color: #FFF;
}

h1 em:last-child {
  top: .5em;
  left: 1em;
}

h2 {
  display: block;
  height: 1.5em;
  margin: 1.5em 0;
  color: #606060;
  line-height: 1.25em;
}

hr {
  position: relative;
  width: 4em;
  height: 1px;
  background: #202020;
  margin: 1em auto;
}
.slogan {
  position: relative;
  display: block;
  overflow: hidden; 
  width: 0em;
  height: 1.25em;
  margin: 1em auto;
  font-size: 2em;
  line-height: 1.5em;
  border-right: .125em solid #39F;
  box-sizing: content-box;
  animation-name: blink-start, typing, blink-end;
  animation-duration: 1s, 1s, 1s;
  animation-timing-function: linear, steps(13, end), linear;
  animation-delay: 0s, 1s, 2s;
  animation-iteration-count: 1, 1, infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.slogan span {
  display: block;
  width: 8em;
}

@keyframes typing {
  from { width: 0em; }
  to   { width: 8em; }
}

@keyframes blink-start {
  from, to { border-color: #39F; }
  50% { border-color: transparent; }
}

@keyframes blink-end {
  from, to { border-color: #39F; }
  50% { border-color: transparent; }
}
.contact {
  position: relative;
  width: 20em;
  margin: -1em auto 1.5em auto;
}

.contact a {
  display: inline-block;
  overflow: hidden;
  opacity: 0;
  width: 2em;
  line-height: 2em;
  margin: 0 .20em;
  color: #555;
  font-size: 1.5em;
  transition: background-color .2s ease-in-out;
  border-radius: 50%;
  animation: icons .2s ease-out 0s 1 normal forwards;
}

@keyframes icons {
  0%    { transform: translateY(3em); opacity: 0; }
  70%   { transform: translateY(-.5em); opacity: 1; }
  100%  { transform: translateY(0em); opacity: 1; }
}

.contact a:nth-child(1) { animation-delay: 2.5s; }
.contact a:nth-child(2) { animation-delay: 2.55s; }
.contact a:nth-child(3) { animation-delay: 2.6s; }
.contact a:nth-child(4) { animation-delay: 2.65s; }

.contact a:hover { color: #39F; }
</style>
</head>
<body>
  <div class="container">
  <h1><a href="http://www.birkof.ro"><em>D</em>aniel <em>S</em>tancu</a></h1>
  <p class="slogan"><span>I code stuff.</span></p>
  <div class="contact">
    <a href="https://twitter.com/birkof" target="_blank"><i class="icon-twitter"></i></a>
    <a href="https://facebook.com/birkof" target="_blank"><i class="icon-facebook"></i></a>
    <a href="https://linkedin.com/in/birkof" target="_blank"><i class="icon-linkedin"></i></a>
    <a href="https://github.com/birkof" target="_blank"><i class="icon-github"></i></a>
  </div>
</div>
</body>
</html>

10. CSS Typing Effect

Made by Marko. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://codepen.io/denic/pen/YzyPzKG.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
.wrapper {
  height: 100vh;
  /*This part is important for centering*/
  display: grid;
  place-items: center;
}

.typing-demo {
  width: 22ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}
</style>
</head>
<body>
  <div class="wrapper">
    <div class="typing-demo">
      This is a typing demo.
    </div>
</div>
  <script src='https://codepen.io/denic/pen/YzyPzKG.js'></script>
</body>
</html>

11. Gradient typing effect in CSS

Made by Jasmine G. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
<style>
/* NOTE: I only tested this on Google Chrome.*/

body{
  background: #FBD4C5;
}

.container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 100px;
}

.container h1:nth-child(1) {
  color: #355c7d;
  font-family: 'Fira Code', monospace;
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 0 35%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  width: 170px;
  animation: type 2s steps(40,end) forwards;
}

.container h1:nth-child(2) {
  opacity: 0;
  font-family: "Work Sans", sans-serif;
  margin: 0 auto auto auto;
  background: linear-gradient(to right, #f8b195, #f67280, #c06c84);
  font-weight: 800;
  font-size: 100px;  
  width: 430px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow: hidden;
  animation: shring-animation 2.2s steps(40,end) 2s forwards, blink .5s step-end infinite alternate;
}

@keyframes shring-animation {
  0% {
    background-position: 0 0;
    opacity: 0;
    width: 0;
  }
  1% {
    background-position: 0 0;
    opacity: 1;
    border-right: 1px solid orange;
  }
  50% {
    background-position: 150px 0;
    opacity: 1;
    border-right: 1px solid orange;
  }
  100% {
    background-position: 400px 0;
    opacity: 1;
    border-right: 1px solid orange;
  }
}

@keyframes type {
  0% {
    width: 0;
  }
  1%, 99%{
    border-right: 1px solid orange;
  }
  100%{
    border-right: none;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
</style>
</head>
<body>
  <div class = "container">
  <h1>Hi, my name is</h1>
  <h1>Jasmine.</h1>
</div>
</body>
</html>