web-dev-qa-db-ja.com

複数のCSSアニメーションの連鎖

2つのCSSアニメーションをチェーンしようとしています。ペンを参照してください： http://codepen.io/jdesilvio/pen/pjwvyO

同様の質問に対する他の回答で提供されている構文に従いましたが、正しく機能していないようです：

animation-name: falling, laydown;
animation-duration: 2000ms, 1000ms;
animation-timing-function: ease-in, ease-out;
animation-iteration-count: 1, 1;

2番目のアニメーション、次に最初のアニメーション、最後に2番目のアニメーションを再生しています。最初に再生し、次に2番目に再生するにはどうすればよいですか？

完全なコードは次のとおりです。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes falling {
  0% {
    transform: translate3d(0, -400px, 0);
  }
  100% {
    transform:
      translate3d(0, 40%, 0)
      rotateX(30deg)
      rotateY(0deg)
      rotateZ(60deg);
  }
}

@keyframes laydown {
  0% {
    transform:
      translate3d(0, 40%, 0)
      rotateX(30deg)
      rotateY(0deg)
      rotateZ(60deg);
  }
  100% {
    transform:
      translate3d(0, 40%, 0)
      rotateX(70deg)
      rotateY(0deg)
      rotateZ(80deg);
  }
}

#falling-card-parent {
  height: 150px;
  width: 100px;
  margin: auto;
  perspective: 1000px;
}

#falling-card {
  height: 150px;
  width: 100px;
  background-color: black;
  margin: auto;
  transform:
    translate3d(0, 40%, 0)
    rotateX(70deg)
    rotateY(0deg)
    rotateZ(80deg);
  animation-name:
    falling, laydown;
  animation-duration:
    2000ms, 1000ms;
  animation-timing-function:
    ease-in, ease-out;
  animation-iteration-count:
    1, 1;
}

</style>
<html>
  <body>
    <div id="falling-card-parent">
      <div id="falling-card"></div>
    </div>
  </body>
</html>
htmlcsscss-animations
14
jdesilvio

問題は実際にはアニメーションの順序ではなく、pme要素の複数のアニメーションがどのように機能するかによるものです。要素に複数のアニメーションが追加されると、デフォルトで同時に開始されます。

このため、laydownアニメーションとfallingアニメーションの両方が同時に開始されますが、laydownアニメーションは、実際には最初から1000ms内で完了しますが、最初のアニメーション（これはfalling）2000msまで完了しません。

W3C仕様 アニメーションについては、アニメーション中に同じプロパティにアクセスする複数のアニメーションについても次のように述べています。

複数のアニメーションが同じプロパティを変更しようとしている場合は、名前のリストの最後に最も近いアニメーションが優先されます。

問題のコードでは、両方のアニメーションがtransformプロパティを変更しようとしており、2番目のアニメーションが最後に最も近いです。したがって、2番目のアニメーションがまだ実行されている間（つまり、最初の1000ミリ秒の間）、変換の変更は2番目のアニメーションで指定されているように適用されます。この間、最初のアニメーションはまだ実行されていますが、値が上書きされるため効果はありません。 2番目の1000ms（2番目のアニメーションがすでに完了しているが、1番目がまだ実行中の場合）では、最初のアニメーションの指示に従って変換が適用されます。これが、2番目のアニメーションが最初のアニメーションの前に実行されてから最初のアニメーションが実行されているように見える理由です。

この問題を修正するには、最初のアニメーションが完了するまで、2番目のアニメーションの実行を保留（または遅延）する必要があります。これは、2番目のアニメーションにanimation-delay（最初のアニメーションのanimation-durationに等しい）を追加することで実行できます。

animation-name: falling, laydown;
animation-duration: 2000ms, 1000ms;
animation-delay: 0ms, 2000ms; /* add this */
animation-timing-function: ease-in, ease-out;
animation-iteration-count: 1, 1;

html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes falling {
  0% {
    transform: translate3d(0, -400px, 0);
  }
  100% {
    transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg);
  }
}
@keyframes laydown {
  0% {
    transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg);
  }
  100% {
    transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg);
  }
}
#falling-card-parent {
  height: 150px;
  width: 100px;
  margin: auto;
  perspective: 1000px;
}
#falling-card {
  height: 150px;
  width: 100px;
  background-color: black;
  margin: auto;
  transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg);
  animation-name: falling, laydown;
  animation-duration: 2000ms, 1000ms;
  animation-delay: 0ms, 2000ms;
  animation-timing-function: ease-in, ease-out;
  animation-iteration-count: 1, 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="falling-card-parent">
  <div id="falling-card"></div>
</div>
16
Harry
html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes falling {
  0% {
    transform: translate3d(0, -400px, 0);
  }
  100% {
    transform:
      translate3d(0, 40%, 0)
      rotateX(30deg)
      rotateY(0deg)
      rotateZ(60deg);
  }
}

@keyframes laydown {
  0% {
    transform:
      translate3d(0, 40%, 0)
      rotateX(30deg)
      rotateY(0deg)
      rotateZ(60deg);
  }
  100% {
    transform:
      translate3d(0, 40%, 0)
      rotateX(70deg)
      rotateY(0deg)
      rotateZ(80deg);
  }
}

#falling-card-parent {
  height: 150px;
  width: 100px;
  margin: auto;
  perspective: 1000px;
}

#falling-card {
  height: 150px;
  width: 100px;
  background-color: black;
  margin: auto;
  transform:
    translate3d(0, 40%, 0)
    rotateX(70deg)
    rotateY(0deg)
    rotateZ(80deg);
  animation-name:
    laydown, falling;
  animation-duration:
    2000ms, 1000ms;
  animation-timing-function:
    ease-in, ease-out;
  animation-iteration-count:
    1, 1;
}
    <div id="falling-card-parent">
      <div id="falling-card"></div>
    </div>

これを逆にするだけです：

 animation-name:
    falling, laydown;

に

 animation-name:
    laydown, falling;

ここで： http://jsfiddle.net/hfxopjjy/

1
user1012181