CSS Text Animations - free examples, templates & tutorial-codewithtanveer

Tanveer Ahmad

 CSS Text Animations - free examples, templates & tutorial-codewithtanveer 

A beautiful collection of CSS text animations with source code and a video tutorial showing how to achieve these effects step by step.

Certainly! CSS text animations can add a dynamic and engaging element to your website. Here are some free examples, templates, and tutorials to help you get started:

Text animation- codewithtanveer



    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Text Animation</title>
      </head>
    <body>
      <svg viewBox="0 0 1300 300">
        <symbol id="s-text">
          <text text-anchor="middle" x="50%" y="100%">CodeWithTanveer </text>
          <text text-anchor="middle" x="50%" y="100%">CodeWithTanveer </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>
      </body>
    </html>


    <style>
    @import url(https://fonts.googleapis.com/css?family=Montserrat);

    html, body{
      height: 100%;
      font-weight: 800;
    }

    body{
      background: rgb(6, 6, 8);
      font-family: Arial;
    }

    svg {
        display: block;
        font: 7.5em 'Montserrat';
        width: 1300px;
        height: 400px;
        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: #06ebf3;
      animation-delay: -1;
    }

    .text-copy:nth-child(2){
      stroke: #fdd806;
      animation-delay: -2s;
    }

    .text-copy:nth-child(3){
      stroke: #44e9f5;
      animation-delay: -3s;
    }

    .text-copy:nth-child(4){
      stroke: #46f7b3;
      animation-delay: -4s;
    }

    .text-copy:nth-child(5){
      stroke: #f5371e;
      animation-delay: -5s;
    }

    @keyframes stroke-offset{
      100% {stroke-dashoffset: -35%;}
    }
</style>















0 Comments