Pure CSS Text Typing Animations - News Ticker

Pure CSS Text Typing Animations - News Ticker CSS Code

<style>
.typ-txt {
  border-right: solid 3px black;
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  color: red;
}

/* Animation */
.typ-txt {
  animation: animated-text 4s steps(29,end) 1s 1 normal both,
             animated-cursor 600ms steps(29,end) infinite;
}

/* text animation */

@keyframes animated-text{
  from{width: 0;}
  to{width: 472px;}
}

/* cursor animations */

@keyframes animated-cursor{
  from{border-right-color: black;}
  to{border-right-color: transparent;}
}
</style>

Pure CSS Text Typing Animations - News Ticker HTML CODE

<center>
<div class="typ-txt">CSS Text Typing Animations!</div>
</center>

Pure CSS Text Typing Animations - News Ticker LIVE PREVIEW

Live Preview