0

最初に、私は CSS のスキルがほとんどないと言います (ゆっくりとそれを修正しようとしています)。

次のアニメーションでは、文字ごとに 1 つずつ、多数の遅延があります。
すべてがうまくいけば、素敵な波状の効果が得られますが、問題はほとんどそうではないということです.
遅かれ早かれリフレッシュし続けると、それが表示されます....私にとっては、PとAであることが多いため、同じ速度で上下します（遅延はありませんでした）。
これを確実に機能させる方法についてのアドバイスをいただければ幸いです。

http://jsbin.com/IkuR/1/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Trash</title>


<style id="jsbin-css">
.wavey li:nth-child(1) {
  -webkit-animation-delay: 0.1s;
}
.wavey li:nth-child(2) {
  -webkit-animation-delay: 0.3s;
}
.wavey li:nth-child(3) {
  -webkit-animation-delay: 0.5s;
}
.wavey li:nth-child(4) {
  -webkit-animation-delay: 0.7s;
}
.wavey li:nth-child(5) {
  -webkit-animation-delay: 0.9s;
}
.wavey li:nth-child(6) {
  -webkit-animation-delay: 1.1s;
}
.wavey li:nth-child(7) {
  -webkit-animation-delay: 1.3s;
}
.wavey li:nth-child(8) {
  -webkit-animation-delay: 1.5s;
}
.wavey li:nth-child(9) {
  -webkit-animation-delay: 1.7s;
}
.wavey li {
  width:41px;
  font-size:20px;
  display:inline-block;
  margin:0px;
  padding:0px;
  -webkit-animation: upndown 3s infinite;
}

.wavey {
  -webkit-backface-visibility: hidden;
  line-height:69px; 
  color:white;
  font-family: "pixel";
  font-size: 0;
  margin:0px;
  padding:0px;
  border:0px;
  display:inline-block;
  position:absolute;
  list-style-type: none;
}

@-webkit-keyframes upndown {
  0% {
    -webkit-transform: translateY(0px);
    -webkit-animation-timing-function: ease-in-out;
  } 
  50% {
    -webkit-transform: translateY(50px);
    -webkit-animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    -webkit-animation-timing-function: ease-in-out;
  }
}


html {
  background-color:#000;
  font-size: 0;

}
body { 
  font-size: 0;
  overflow:hidden;
  padding:0px;
  margin:0px;

}

</style>

</head>
<body>

    <ul class="wavey">
        <li>P</li>
        <li>A</li>
        <li>E</li>
        <li>z</li>
        <li>&nbsp;</li>
        <li>C</li>
        <li>d</li>
        <li>K</li>
        <li>.</li>
    </ul>

</body>
</html>
4

1 に答える 1

2

私は自分自身の解決策を見つけました:)
これが他の誰かに発生した場合は、遅延に負の値を使用してみてください。これはうまく機能しているようです。
MDNを引用するには....

アニメーションの遅延に負の値を指定すると、アニメーションの実行がすぐに開始されます。ただし、サイクルの途中で実行を開始したように見えます。たとえば、アニメーションの遅延時間として -1s を指定すると、アニメーションはすぐに開始されますが、アニメーション シーケンスの 1 秒後に開始されます。

固定コード.... 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Trash</title>


<style id="jsbin-css">
.wavey li:nth-child(1) {
  -webkit-animation-delay: -0.1s;
}
.wavey li:nth-child(2) {
  -webkit-animation-delay: -0.3s;
}
.wavey li:nth-child(3) {
  -webkit-animation-delay: -0.5s;
}
.wavey li:nth-child(4) {
  -webkit-animation-delay: -0.7s;
}
.wavey li:nth-child(5) {
  -webkit-animation-delay: -0.9s;
}
.wavey li:nth-child(6) {
  -webkit-animation-delay: -1.1s;
}
.wavey li:nth-child(7) {
  -webkit-animation-delay: -1.3s;
}
.wavey li:nth-child(8) {
  -webkit-animation-delay: -1.5s;
}
.wavey li:nth-child(9) {
  -webkit-animation-delay: -1.7s;
}
.wavey li {
  width:41px;
  font-size:20px;
  display:inline-block;
  margin:0px;
  padding:0px;
  -webkit-animation: upndown 3s infinite;
}

.wavey {
  -webkit-backface-visibility: hidden;
  line-height:69px; 
  color:white;
  font-family: "pixel";
  font-size: 0;
  margin:0px;
  padding:0px;
  border:0px;
  display:inline-block;
  position:absolute;
  list-style-type: none;
}

@-webkit-keyframes upndown {
  0% {
    -webkit-transform: translateY(0px);
    -webkit-animation-timing-function: ease-in-out;
  } 
  50% {
    -webkit-transform: translateY(50px);
    -webkit-animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    -webkit-animation-timing-function: ease-in-out;
  }
}


html {
  background-color:#000;
  font-size: 0;

}
body { 
  font-size: 0;
  overflow:hidden;
  padding:0px;
  margin:0px;

}

</style>

</head>
<body>

    <ul class="wavey">
        <li>P</li>
        <li>A</li>
        <li>E</li>
        <li>z</li>
        <li>&nbsp;</li>
        <li>C</li>
        <li>d</li>
        <li>K</li>
        <li>.</li>
    </ul>

</body>
</html>
于 2013-08-22T21:02:08.557 に答える