CSS анимация отличается в браузерах - PullRequest
Новая
       75

CSS анимация отличается в браузерах

1 голос
/ 29 марта 2019

Создано две анимации с использованием CSS & SVG. Они хорошо работают в Chrome , но не и работают должным образом в Internet Explorer .

Снимок экрана Chrome

Chrome Screen Shot

Снимок экрана Internet Explorer

Internet Explorer Screen Shot

Мои коды: 

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>

Запустите результат кода в разных браузерах, чтобы понять ошибку. Правильный результат будет в Latest Chrome.

JSFiddle

Заголовок анимирован в формате SVG, классно выглядит в Chrome, но не в Internet Explorer.

Некоторый текст здесь анимирован с помощью CSS, выглядит круто в Chrome, но не так, как ожидалось в Internet Explorer.

...