0

首先，我会说我几乎没有 CSS 技能（慢慢地试图解决这个问题），所以如果它很明显，我会道歉。

在下面的动画中，我有一堆延迟，每个字母一个。
如果一切顺利，你最终会得到一个很好的波浪效果，问题是它几乎从来没有这样做过。
如果您迟早会保持刷新，您会看到它……对我来说，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 回答