1

Created two animations using CSS & SVG. They are working well in Chrome, but not working as expected in Internet Explorer.

Chrome Screenshot

Chrome Screen Shot

Internet Explorer Screenshot

Internet Explorer Screen Shot

My Codes:

body {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
}

p {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #000fe6, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3.75s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(45, 45, 45, .05);
  display: flex;
  justify-content: center;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

svg {
  display: flex;
  font: 10.5em 'Montserrat';
  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%;
  }
}

@media screen and (max-width: 600px) {
  p {
    font-size: 20px;
  }
}
<body>
  <div>
    <h3>
      <svg viewBox="0 0 960 300">
 <symbol id="s-text">
  <text text-anchor="middle" x="50%" y="80%">Title</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>
    </h3>
    <p>Some text here</p>
  </div>
</body>

Run the result of the code on different browsers to understand the mistake. The correct result will be in Latest Chrome.

JSFiddle

Title is animated in SVG format, looks cool in Chrome but not in Internet Explorer.

Some text here is animated with the help of CSS, looks cool in Chrome, but it's not as expected in Internet Explorer.

Chirag Jain
  • 1,367
  • 1
  • 11
  • 27
Pal
  • 85
  • 5
  • IE does not support CSS animation of SVG elements. Please refer to this question: https://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11 – enxaneta Mar 29 '19 at 08:38
  • Ok, and what about **Some text here**? (CSS animation) – Pal Mar 29 '19 at 08:45
  • [background clip text is not working in IE](https://stackoverflow.com/questions/39275608/background-clip-text-is-not-working-in-ie) – enxaneta Mar 29 '19 at 08:50
  • So, what can be alternative methods for both? – Pal Mar 29 '19 at 08:59
  • https://caniuse.com/ Refer this site to know about browser support for the css3 properties you are using. – Vivek Vikranth Mar 29 '19 at 09:53
  • **Alternative method**: Your code produce a fancy aesthetical output. You may choose to use a plain unanimated svg in those browsers that do not `@supports` CSS animation on SVG elements or background clip text. – enxaneta Mar 29 '19 at 14:39
  • @enxaneta I tried `@supports (stroke-dasharray: 6% 29%; ) { .text-copy { stroke-dasharray: 6% 29%; } }` but it then shows normal on supported browsers too... refer https://jsfiddle.net/oweLs903/1/ – Pal Mar 30 '19 at 12:36
  • Try `@supports (stroke-dasharray: 6% 29%)` instead of `@supports (stroke-dasharray: 6% 29%; )`. Delete the semicolon `;` – enxaneta Mar 30 '19 at 13:52

0 Answers0