Question

任何人都知道为什么＆＃34; b-front＆＃34;在Safari中倒退？它在Chrome中运行良好。我尝试使用＆＃34; -webkit - ＆＃34;在关键帧，动画和描边 - dashoffset后面，但没有任何效果。

＆＃13;

body {
  background-color: #36d7b7;
}

#logo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: scale(0);
  width: 35%;
  padding: 10px;
  transform-origin: 50% 50%;
  animation: bounce-in 700ms ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

#shadow {
  opacity: 0;
  animation: draw-shadow 1s ease 2s;
  animation-fill-mode: forwards;
}

@keyframes draw-shadow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#s {
  transform-origin: 50% 50%;
  stroke-dasharray: 128;
  stroke-dashoffset: -128;
  animation: draw-s 2000ms 500ms;
  animation-fill-mode: forwards;
}

#b-back {
  transform-origin: 50% 50%;
  stroke-dasharray: 93;
  stroke-dashoffset: -93;
  animation: draw-b-back 2000ms 500ms;
  animation-fill-mode: forwards;
}

#b-front {
  transform-origin: 50% 50%;
  stroke-dasharray: 124;
  stroke-dashoffset: -124;
  animation: draw-b-front 2000ms 500ms;
  animation-fill-mode: forwards;
}

@keyframes draw-b-front {
  from {
    stroke-dashoffset: -124;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-s {
  from {
    stroke-dashoffset: 128;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-b-back {
  from {
    stroke-dashoffset: 93;
  }
  to {
    stroke-dashoffset: 0;
  }
}

＆＃13;

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.8 120.8">
  <style>
    .st0{fill:#FFFFFF;} .st1{display:none;fill:#5ABCAA;} .st2{fill:#5BBBA3;} .st3{fill:none;stroke:#5BBBA3;stroke-width:8;stroke-miterlimit:20;} .st4{fill:#2F9B7E;} .st5{fill:none;stroke:#FFFFFF;stroke-width:8;stroke-miterlimit:10;} .st6{fill:#4DA08F;} .st7{fill:#42877A;} .st8{fill:#5ABBA3;}
  </style>
  <path class="st1" d="M0 0h120.7v120.7H0z"/>
  <path id="circle" class="st6" d="M117.8 60.3c.1 31.1-25.1 56.4-56.3 56.5-31.1.1-56.4-25.1-56.5-56.3C4.9 29.4 30.1 4.1 61.3 4c31.1-.1 56.4 25.1 56.5 56.3z"/>
  <path id="shadow" class="st7" d="M117.4 53.6L84.5 20.7l-.8.8c-5.2-5.7-13.3-9.7-22.1-9.7-15.8 0-28.4 12.1-28.4 26.5 0 8.9-.1 17.7 7.3 22.4L39 66.2c.5.5 1 1.1 1.4 1.9 1.9 3.9 7.4 5.5 10.2 8.8 4.3 5 4.5 11.6 4.4 17.8-.1 8.2-11.4 9.1-13.9 2.7-.6-.7-1-1.5-1.2-2.4-1.1 2.4-1.4 5.8-4.2 5.9l14.8 14.9c3.5.7 7.2 1 10.9 1 31.1-.1 56.3-25.4 56.3-56.5.1-2.3-.1-4.5-.3-6.7z"/>
  <path id="s" class="st5" d="M60.6 15.8c-12 0-27.7 10.6-27.7 29.3C32.9 64 52.3 72 55.6 84.5c3 11.3-2 16.3-5 17.3-6 2-12-3-14-6"/>
  <path id="b-front" class="st5" d="M62.6 104.8s20 0 22.5-13.4c2.1-11.5-3.9-19.7-3.9-19.7s10.4-8.4 10.4-24c0-25.2-21-31.8-29-31.8"/>
  <path id="b-back" class="st5" d="M66.6 14.6v92.2"/>
</svg>

＆＃13;

Here's the animation on CodePen

CSS动画在Safari（移动和桌面）中向后播放

0 个答案: