"Text Animation Boostrap"
Bootstrap 3.3.0 Snippet by Ganesh Gujjeti 123

<div class="container"> <div class="row"> <svg viewBox="0 0 960 300"> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="80%">Ganesh </text> </symbol> <g class = "g-ants"> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> </g> </svg> </div> <div class="row"> <address> author by: Ganesh Gujjeti </address> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Montserrat); html, body{ height: 100%; font-weight: 800; } body{ background: #030321; font-family: Arial; } svg { display: block; font: 10.5em 'Montserrat'; width: 960px; height: 300px; margin: 0 auto; } .text-copy { fill: none; stroke: white; stroke-dasharray: 6% 29%; stroke-width: 5px; stroke-dashoffset: 0%; animation: stroke-offset 5.5s infinite linear; } .text-copy:nth-child(1){ stroke: #4D163D; animation-delay: -1; } .text-copy:nth-child(2){ stroke: #840037; animation-delay: -2s; } .text-copy:nth-child(3){ stroke: #BD0034; animation-delay: -3s; } .text-copy:nth-child(4){ stroke: #BD0034; animation-delay: -4s; } .text-copy:nth-child(5){ stroke: #FDB731; animation-delay: -5s; } @keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} }

Similar snippets: See More


Comments:

Mike Summers 2016-11-01 14:03:06
    How would I add more colours I tried but failed badly :)
Giruba karan 2017-01-30 15:43:43
    HTML
<g class="g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>// Copy Paste here again
</g>
CSS
.text-copy:nth-child(6){
stroke: green;
animation-delay: -6s;
}
nth-child(N) --> Here N Represent the no of lines to display
That's it
Michael Davison 2017-01-27 10:06:00
    This is amazing! Used it for multiple things
hanif hashim 2017-06-06 15:47:49
    brilliant! you have won my heart

Commenting will be back soon.