Question

我一直在努力解决这个问题。

.intro #intro-n,
.intro #intro-o,
.intro #intro-a2 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400; }
.intro #intro-n {
  /*-webkit-animation: intro-letters 0.9s linear;*/
  -webkit-animation-name: intro-letters;
  -webkit-animation-duration: 0.9s;
  -webkit-animation-timing-function: linear;

  -moz-animation: intro-letters 0.9s linear;
  animation: intro-letters 0.9s linear;
  animation-name: intro-letters;
  animation-duration: 0.9s;
  animation-timing-function: linear;

  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s; }

    @-webkit-keyframes intro-letters {
  0% {

  }
  100% {
    stroke-dashoffset: 0; } }

@-moz-keyframes intro-letters {
  0% {

  }
  100% {
    stroke-dashoffset: 0; } }

@keyframes intro-letters {
  0% {

  }
  100% {
    stroke-dashoffset: 0; } }

http://codepen.io/anon/pen/ORkZwG

此代码完全适用于Windows（IE除外）和Android设备，但是当我尝试在iOS Safari中启动它时甚至是chrome SVG动画都是空白的。

编辑：是的，它适用于iOS桌面谷歌Chrome版本，但它不适用于iOS平板电脑Chrome或Safari

Answer 1

在这个问题上花了相当多的时间之后，我终于把它搞砸了，似乎问题出现在这段代码中：

.intro svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    max-width: 250px;
    /*-webkit-animation: intro-hide-element 0s linear;*/
    -webkit-animation-name: intro-hide-element;
    -webkit-animation-duration: 0s;
    -webkit-animation-timing-function: linear;  
    -moz-animation: intro-hide-element 0s linear;
    animation: intro-hide-element 0s linear;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 5.1s;
    -moz-animation-delay: 5.1s;
    animation-delay: 5.1s; }

特别是：

-webkit-animation-duration: 0s;
-moz-animation: intro-hide-element 0s linear;
animation: intro-hide-element 0s linear;

将其更改为：

-webkit-animation-duration: 0.001s;
-moz-animation: intro-hide-element 0.001s linear;
animation: intro-hide-element 0.001s linear;

safari平板电脑浏览器中的动画出现了，我不完全确定为什么它适用于chrome而不是safari，但这就是我的诀窍，希望有人可以更详细地解释为什么这是发生但同时希望它可以帮助某人。

iOs Safari和谷歌Chrome SVG动画并没有显示出来

1 个答案: