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

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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%;} }

Related: See More


Questions / Comments:

Remove Last </div>

sanjeet26 () - 2 months ago - Reply 0


brilliant! you have won my heart

hanif hashim () - 1 year ago - Reply 0


This is amazing! Used it for multiple things

Michael Davison () - 1 year ago - Reply 0


How would I add more colours I tried but failed badly :)

Mike Summers () - 2 years ago - Reply 0


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

Giruba karan () - 1 year ago - Reply 0