How to create 3D Animated Text with css

Hi, I am going to introduce an amazing animation concept for your web page. I think you have to know a keyword SVG, yes SVG stands for Scalable Vector Graphics. SVG is used to define vector-based graphics for the Web application using HTML and CSS. One big thing is SVG graphics do not lose quality either zoomed or resized your page.

In this example, I'll introduce a CSS trick:- :nth-child

.text:nth-child(5n + 1) {
  stroke: #3cba54;
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.2s;
}

First look at here, see how it works :nth-child

(5 x 0) + 1 = 1 = 3rd Element
(5 x 1) + 2 = 7 = 7th Element
(5 x 2) + 3 = 13 = 13th Element

Using this CSS trick you can set stroke color and animation delay on your element. In the color section, you can choose your favorite color and animation delay accordingly browser compatibility.

In the HTML section, you need to implement SVG tag with some child nodes. For this example I have used a simple tag as multiple use cases for example:

<svg viewBox="0 0 600 300">
  
  <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy="0.35em">Legend Blogs</text>
  </symbol>
  
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
</svg>

Let's start from an HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3D Animated Text Example</title>
<link rel="stylesheet" href="lb_css.css" type="text/css" />
</head>
<body>
<svg viewBox="0 0 600 300">
  <!-- Symbol-->
  <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy="0.35em">Legend Blogs</text>
  </symbol>
  <!-- Duplicate symbols-->
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
</svg>
    
</body>
 
</html>

CSS page like this:

@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
body {
  background: #fff;
  font: 5em/1 Open Sans, Impact;
  margin: 0;
}
.text {
  fill: none;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
}
.text:nth-child(5n + 1) {
  stroke: #3cba54;
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
  stroke: #f4c20d;
  -webkit-animation-delay: -2.1s;
  animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
  stroke: #db3236;
  -webkit-animation-delay: -3.2s;
  animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
  stroke: #56d9ef;
  -webkit-animation-delay: -4.4s;
  animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
  stroke: #4885ed;
  -webkit-animation-delay: -5s;
  animation-delay: -6s;
}
@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}