Web Development. Client Satisfaction. Web Consultancy. Professional. UX. Fast. Responsive Design. Dynamic. Interactive. Innovative. Ecommerce. Wordpress plugins. Prestashop modules. You name it.

CSS Typewriter Effect Animation Using Only CSS & HTML

CSS Typewriter Effect Animation Using Only CSS & HTML

Simple typewriterr effect animation using just css and html. In order to create this effect we will use keyframes css property and steps().

Typewriter Effect

<!doctype html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="profile" href="https://gmpg.org/xfn/11" />
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>
</body>
</html>		
CSS
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

html{
  min-height:100%;
  overflow: hidden;
}
body{
  height:calc(100vh - 8em);
  padding:4em;
  color:rgba(255,255,255,0.75);
  font-family: 'Anonymous Pro';
  background-color:rgb(25,25,25);
}
.line-1{
  position: relative;
  top:50%;
  width: 24em;
  margin:0 auto;
  border-right: 2px solid rgba(255,255,255,0.75);
  font-style: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform:translateY(-50%) scale(2);
}
.anim-typewriter{
  animation:typewriter 4s steps(44) 1s 1 normal both,
        blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{
    width:0;
  }
  to{
    width:24em;
  }
}
@keyframes blinkTextCursor{
  from{
    border-right-color:rgba(255,255,255,0.75);
  }
  to{
    border-right-color:transparent;
  }
}
All code you need for this animation.    

Leave a Reply

avatar
  Subscribe  
Notify of
*/?>