23

CSS animation-delay に関する Safari のイライラするバグがあります。

このアニメーションは、Chrome、Firefox、IE11、IE10 のデスクトップでは美しく動作しますが、Safari ではさまざまな結果が得られます。袋の破片はすべて、同じ量の一時停止 (animation-delay によって制御) の後に表示される必要があります。

デスクトップ Safari は正しく表示される場合もあれば、バッグ トランジションの最初の部分が遅くなり、最後が速くなる場合もあれば、いくつかのトランジションがまとまって表示される場合もあります。iPhone 6 のモバイル Safari およびモバイル Chrome では、アニメーションの遅延をすべて無視して、バッグ全体を一度に移行することがあります。パフォーマンスが一貫していない場合、トラブルシューティングに苦労しています。アニメーションを開始する前に、すべてのアセットがページにロードされていることを確認するために JavaScript を少し追加しましたが、それは役に立たなかったようです。ここで何が起こっているか知っている人はいますか？

http://codepen.io/brendamarienyc/pen/qdoOZM

@-webkit-keyframes bag-1 {
  0%, 
    19.9% {
    opacity: 0;
  }
  20%,
    100% {
    opacity: 1;
  }
}
@keyframes bag-1 {
  0%, 
    19.9% {
    opacity: 0;
  }
  20%,
    100% {
    opacity: 1;
  }
}
.satchel-1 {
  -webkit-animation-name: bag-1;
          animation-name: bag-1;
  -webkit-animation-duration: 22500ms;
          animation-duration: 22500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  opacity: 0;
}
.preload .satchel-1 {
  -webkit-animation-name: none !important;
          animation-name: none !important;
}

@-webkit-keyframes bag-2 {
  0%, 
    39.9% {
    opacity: 0;
  }
  40%,
    100% {
    opacity: 1;
  }
}

@keyframes bag-2 {
  0%, 
    39.9% {
    opacity: 0;
  }
  40%,
    100% {
    opacity: 1;
  }
}
.satchel-2 {
  -webkit-animation-name: bag-2;
          animation-name: bag-2;
  -webkit-animation-duration: 22500ms;
          animation-duration: 22500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  opacity: 0;
}
.preload .satchel-2 {
  -webkit-animation-name: none !important;
          animation-name: none !important;
}

@-webkit-keyframes bag-3 {
  0%, 
    59.9% {
    opacity: 0;
  }
  60%,
    100% {
    opacity: 1;
  }
}

@keyframes bag-3 {
  0%, 
    59.9% {
    opacity: 0;
  }
  60%,
    100% {
    opacity: 1;
  }
}
.satchel-3 {
  -webkit-animation-name: bag-3;
          animation-name: bag-3;
  -webkit-animation-duration: 22500ms;
          animation-duration: 22500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  opacity: 0;
}
.preload .satchel-3 {
  -webkit-animation-name: none !important;
          animation-name: none !important;
}

@-webkit-keyframes bag-4 {
  0%, 
    79.9% {
    opacity: 0;
  }
  80%,
    100% {
    opacity: 1;
  }
}

@keyframes bag-4 {
  0%, 
    79.9% {
    opacity: 0;
  }
  80%,
    100% {
    opacity: 1;
  }
}
.satchel-4 {
  -webkit-animation-name: bag-4;
          animation-name: bag-4;
  -webkit-animation-duration: 22500ms;
          animation-duration: 22500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  opacity: 0;
}
.preload .satchel-4 {
  -webkit-animation-name: none !important;
          animation-name: none !important;
}

@-webkit-keyframes bag-5 {
  0%, 
    99.9% {
    opacity: 0;
  }
  100%,
    100% {
    opacity: 1;
  }
}

@keyframes bag-5 {
  0%, 
    99.9% {
    opacity: 0;
  }
  100%,
    100% {
    opacity: 1;
  }
}
.satchel-5 {
  -webkit-animation-name: bag-5;
          animation-name: bag-5;
  -webkit-animation-duration: 22500ms;
          animation-duration: 22500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  opacity: 0;
}
.preload .satchel-5 {
  -webkit-animation-name: none !important;
          animation-name: none !important;
}

.satchel-container {
  height: 450px;
  width: 472px;
  margin: 2em auto;
  position: relative;
}
@media (max-width: 500px) {
  .satchel-container {
    height: 300px;
    width: 315px;
  }
}

.satchel-shadow {
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0px;
  height: 94px;
  width: 472px;
}
@media (max-width: 500px) {
  .satchel-shadow {
    height: 63px;
    width: 315px;
  }
}

.satchel-body {
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0px;
  height: 295px;
  width: 472px;
  -webkit-animation-delay: 0;
          animation-delay: 0;
}
@media (max-width: 500px) {
  .satchel-body {
    height: 197px;
    width: 315px;
  }
}

.satchel-gusset {
  position: absolute;
  bottom: 30px;
  left: 14px;
  height: 221px;
  width: 441px;
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
}
@media (max-width: 500px) {
  .satchel-gusset {
    position: absolute;
    bottom: 20px;
    left: 10px;
    height: 149px;
    width: 294px;
  }
}

.satchel-piping {
  position: absolute;
  bottom: 22px;
  left: 21px;
  height: 268px;
  width: 429px;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
}
@media (max-width: 500px) {
  .satchel-piping {
    position: absolute;
    bottom: 15px;
    left: 14px;
    height: 179px;
    width: 286px;
  }
}

.satchel-collar {
  position: absolute;
  bottom: 15px;
  left: 30px;
  height: 63px;
  width: 412px;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
}
@media (max-width: 500px) {
  .satchel-collar {
    position: absolute;
    bottom: 7px;
    left: 20px;
    height: 42px;
    width: 275px;
  }
}

.satchel-strap {
  position: absolute;
  bottom: 70px;
  left: 139px;
  height: 370px;
  width: 195px;
  -webkit-animation-delay: 1350ms;
          animation-delay: 1350ms;
}
@media (max-width: 500px) {
  .satchel-strap {
    position: absolute;
    bottom: 47px;
    left: 92px;
    height: 247px;
    width: 130px;
  }
}

.satchel-narrow {
  position: absolute;
  bottom: 68px;
  left: 13px;
  height: 232px;
  width: 377px;
  -webkit-animation-delay: 1800ms;
          animation-delay: 1800ms;
}
@media (max-width: 500px) {
  .satchel-narrow {
    position: absolute;
    bottom: 46px;
    left: 8px;
    height: 155px;
    width: 251px;
  }
}
4

4 に答える 4

6

キーフレーム アニメーションの代わりに単純なトランジションを使用してみてはどうでしょうか。ここでは不透明度を移行しているだけです-カスタムベジエ曲線を使用することで、同じ効果を実現できます。

-webkit-transform: translateZ(0); を置き換えてみることもできます。-webkit-transform を使用: translate3d(0,0,0); - 過去に 2 つの間のわずかなタイミングの問題に気付きました (この手法を使用しているのは、要素を独自のハードウェア レイヤーに強制するためだけですか?)

于 2015-07-14T07:20:18.510 に答える
4

私が見るところ、実際には要素に遅延を正しく与えていないため、アニメーション遅延の割り当てはこのようなものでなければなりません。

.satchel-strap.satchel-#{$i}{
     animation-delay: $bag-piece-timing * 1.5 * $i
  }

  .satchel-body.satchel-#{$i}{
     animation-delay: $bag-piece-timing * $i;
  }

  .satchel-gusset.satchel-#{$i}{
     animation-delay: $bag-piece-timing * 0.5 * $i
  }

  .satchel-piping.satchel-#{$i}{
    animation-delay: $bag-piece-timing;
  }

  .stachel-collar.satchel-#{$i}{
    animation-delay: $bag-piece-timing;
  }
于 2015-07-22T10:46:08.467 に答える