スニペットに次のコードがあります。iOSを除くすべての場所で正常に機能します-アニメーション化された段落の一部が同時にアニメーション化されるため、問題はアニメーションの遅延にあると思います。デモhttp://stassabiomassa.com/（左のドラゴンの頭から出てくる言葉）を見ることができます。
誰かが問題を知っていますか？助けてください。ありがとう！
.dragon-speech:nth-of-type(1){
-webkit-animation-name: dragon-speech_animation;
-moz-animation-name: dragon-speech_animation;
-ms-animation-name: dragon-speech_animation;
-o-animation-name: dragon-speech_animation;
animation-name: dragon-speech_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dragon-speech:nth-of-type(2){
-webkit-animation-name: dragon-speech_animation;
-moz-animation-name: dragon-speech_animation;
-ms-animation-name: dragon-speech_animation;
-o-animation-name: dragon-speech_animation;
animation-name: dragon-speech_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 2.2s;
-moz-animation-delay: 2.2s;
-ms-animation-delay: 2.2s;
-o-animation-delay: 2.2s;
animation-delay: 2.2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dragon-speech:nth-of-type(3){
-webkit-animation-name: dragon-speech_animation;
-moz-animation-name: dragon-speech_animation;
-ms-animation-name: dragon-speech_animation;
-o-animation-name: dragon-speech_animation;
animation-name: dragon-speech_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 4.2s;
-moz-animation-delay: 4.2s;
-ms-animation-delay: 4.2s;
-o-animation-delay: 4.2s;
animation-delay: 4.2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dragon-speech:nth-of-type(4){
-webkit-animation-name: dragon-speech_animation;
-moz-animation-name: dragon-speech_animation;
-ms-animation-name: dragon-speech_animation;
-o-animation-name: dragon-speech_animation;
animation-name: dragon-speech_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 6.2s;
-moz-animation-delay: 6.2s;
-ms-animation-delay: 6.2s;
-o-animation-delay: 6.2s;
animation-delay: 6.2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dragon-speech:nth-of-type(5){
-webkit-animation-name: dragon-speech_animation;
-moz-animation-name: dragon-speech_animation;
-ms-animation-name: dragon-speech_animation;
-o-animation-name: dragon-speech_animation;
animation-name: dragon-speech_animation;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 8.2s;
-moz-animation-delay: 8.2s;
-ms-animation-delay: 8.2s;
-o-animation-delay: 8.2s;
animation-delay: 8.2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}<p class="dragon-speech">Муха!</p>
<p class="dragon-speech">Муха бесит!</p>
<p class="dragon-speech">Пришлепни!</p>
<p class="dragon-speech">Придави ее!</p>
<p class="dragon-speech">Муха!!!</p>それを解決しました。アニメーションの遅延に負の値を設定すると、正しく機能します。「：nth-of-type（n）」ごとに次のようになります。
animation-delay: -9.8s;
animation-delay: -11.8s;
animation-delay: -13.8s;
animation-delay: -15.8s;
animation-delay: -17.8s;
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加