Is there a way to slowly add letters to text by css?

  • A+

I want to display a word (suppose Slow), is there a way to first display 'slow' then by CSS animation add few O's in the middle, making it from Slow to Sloooooow.

I am using latest chrome so any CSS3/HTML5 features are welcome.


You can consider animating the maximum width of a span like below.

.slow {   display: inline-block;   vertical-align: bottom;   max-width: 0.5rem;   overflow: hidden;   animation: slow 2s ease forwards; }  @keyframes slow {   from {     max-width: 0.5rem;   }   to {     max-width: 3rem;   } }
<span>Sl</span><span class="slow">oooooo</span><span>w</span>


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: