CODEWITHSUNDEEP
htmlcssfirefoxsvg
Dan Stefan
Dan Stefan

Reputation: 51

SVG text with ‘stroke-dashoffset’ CSS animation not working in Firefox

The following animation works fine in Chrome and Opera, but it doesn't work in Mozilla Firefox. I can't figure out why.

Can someone please help me to fix the problem? What is wrong with my CSS?

#text-logo {
  font-family: 'Shrikhand', cursive;
  stroke-dashoffset: 100%;
  stroke-dasharray: 100%;
  -moz-animation: draw 8s forwards ease-in;
  -webkit-animation: draw 8s forwards ease-in;
  animation: draw 8s forwards ease-in;
  background-clip: text;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
<div class="draw_text">
  <svg width="1092" height="220">
    <text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
  </svg>
</div>

Upvotes: 5

Views: 1813

Answers (2)

Robert Longson
Robert Longson

Reputation: 123995

Units have to match in Firefox so if the base is a percentage unit then the animated value must be in percentages too.

There's no such thing as a -moz-animation or -moz-keyframes and any prefixed animations should be placed before the unprefixed version. I've fixed that too below.

#text-logo {
  font-family: 'Shrikhand', cursive;
  stroke-dashoffset: 100%;
  stroke-dasharray: 100%;
  -webkit-animation: draw 8s forwards ease-in;
  animation: draw 8s forwards ease-in;
  background-clip: text;
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0%;
  }

@keyframes draw {
  100% {
    stroke-dashoffset: 0%;
  }
}

}
<div class="draw_text">
  <svg width="1092" height="220">
    <text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
  </svg>
</div>

Upvotes: 2

ccprog
ccprog

Reputation: 21811

Setting stroke-dashoffset: 100% looks like a neat thing, but 100% of what? The canonical definition is:

If a percentage is used, the value represents a percentage of the current viewport …

… the percentage is calculated as the specified percentage of sqrt((actual-width)**2 + (actual-height)**2))/sqrt(2).

Firefox seems to not implement that. Setting px lengths makes it work:

#text-logo {
  font-family: 'Shrikhand', cursive;
  stroke-dashoffset: 1114px;
  stroke-dasharray: 1114px;
  -moz-animation: draw 8s forwards ease-in;
  -webkit-animation: draw 8s forwards ease-in;
  animation: draw 8s forwards ease-in;
  background-clip: text;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
<div class="draw_text">
  <svg width="1092" height="220">
    <text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
  </svg>
</div>

Upvotes: 1

Related Questions