Question

首先，我会说我没有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>

Answer 1

我刚为自己找到了解决方案:)
如果其他人尝试使用负值进行延迟，这似乎工作得很好引用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>

为什么这些动画延迟几乎不起作用

1 个答案: