具有负值的CSS转换延迟？

Question

我试图理解CSS transition-delay属性的负值.请先查看代码示例.有两个divs具有不同的转换延迟.

我认为给延迟的负值与给right div(0.2s)给出一个正值是一样的,但它的行为不一样.我认为它不会0.2s使转换变得过分.

• 任何人都可以解释一下负面transition-delay价值做什么？
• 是transition-delay有效的负值,还是应该不使用？
• 如果可以使用它们,那么什么是好用例？

function toggle() {
  var left = document.querySelector('.left');
  var right = document.querySelector('.right');
  left.classList.toggle('hidden');
  right.classList.toggle('hidden');
  left.classList.toggle('show');
  right.classList.toggle('show');
}
window.setInterval(toggle, 1500);
window.setTimeout(toggle, 100);

#container {
  background: yellow;
  display: flex;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.left,
.right {
  flex: 1;
}
.left {
  background: red;
  transition: transform 1s -0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.right {
  background: blue;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.hidden {
  transform: translateY(100%);
}
.show {
  transform: translateY(0%);
}
.container-hide {
  transform: translateY(-100%);
}

<div id="container">
  <div class="left hidden"></div>
  <div class="right hidden"></div>
</div>

Answer 1

否定transition-delay实际上是完全有效的,它具有不同的含义,0s并且与正延迟不同.

转换延迟的W3C工作草案摘录:

如果值为transition-delay负时间偏移,则转换将在属性更改时执行,但似乎已在指定的偏移量处开始执行.也就是说,过渡似乎会在其游戏周期的中途开始.在转换隐含起始值和负转换的情况下,transition-delay起始值取自属性更改的时刻.

结果是将跳过动画的第一部分.基本上,开始时间被移动,改变动画上的计算点.

因此,如果10s持续时间动画有-5s延迟,它将显示为中途开始(跳过前半部分),并仅完成5s.这是一个简单的例子来展示这种效果.

说明性示例:

function toggle() {
  var left = document.querySelector('.left');
  var right = document.querySelector('.right');
  left.classList.toggle('hidden');
  right.classList.toggle('hidden');
  left.classList.toggle('show');
  right.classList.toggle('show');
}
window.setInterval(toggle, 15000);
window.setTimeout(toggle, 100);

#container {
  background: yellow;
  display: flex;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.left,
.right {
  flex: 1;
}
.left {
  background: red;
  transition: transform 10s linear;
  transition-delay: -5s;
}
.right {
  background: blue;
  transition: transform 10s linear;
  transition-delay: 0s;
}
.hidden {
  transform: translateY(100%);
}
.show {
  transform: translateY(0%);
}
.container-hide {
  transform: translateY(-100%);
}

<div id="container">
  <div class="left hidden"></div>
  <div class="right hidden"></div>
</div>

没有任何理由必须避免使用负持续时间值,因为它们是有效的,它们只是具有非常有限的用例.

Answer 2

问:任何人都可以解释一下负值的transition-delay作用吗？

每MDN文件为transition-delay:

负值会导致转换立即开始,但会导致转换似乎在动画效果的中途开始.

正如Alexander O'Mara的答案所述,W3C工作草案中也对此进行了描述:

如果值为transition-delay负时间偏移,则转换将在属性更改时执行,但似乎已在指定的偏移量处开始执行.也就是说,过渡似乎会在其游戏周期的中途开始.在转换隐含起始值和负转换延迟的情况下,起始值取自属性更改的时刻.

这意味着转换将立即开始并在中途开始,就像指定的时间已经过去一样.例如,考虑这个(开放代码段):

#box1 {
  width: 200px;
  height: 50px;
  
  transition: width 3s 1s;
    
  background-color: green;
}

#box2 {
  width: 200px;
  height: 50px;
  
  transition: width 3s 0s;
    
  background-color: red;
}

#box3 {
  width: 200px;
  height: 50px;
  
  transition: width 3s -1s;
    
  background-color: blue;
}


#box1:hover, #box2:hover, #box3:hover {
  width: 400px;
}

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

<ul>
  <li>Box 1 (green) has transition delay of 1s.</li>
  <li>Box 2 (red) has transition delay of 0s.</li>
  <li>Box 3 (blue) has transition delay of -1s.</li>
<ul>  

你可以看到蓝色框(转换延迟-1s为一个)有点跳跃.这是因为转换立即开始,并在转换的中途开始,就好像过渡应该已经开始已经过去了1秒.

基本上,属性的负值transition-delay使转换从转换所在的位置开始|x|(绝对值x)时间,其中x是属性的指定值.因此,如果我们指定-1s延迟,则转换将立即开始,并将从转换所处的位置开始1s.负值也会从转换的持续时间中消失.

问:transition-delay有效的负值,还是不应该使用？

它们绝对有效,自CSS转换的第一份工作草案以来一直有效.该属性允许所有时间值,并允许负值是其结果.

由于transition-delay将转变延迟一定偏移的定义行为,负值通过偏移负值来跟随.反过来,这会导致动画从中途开始,就像指定时间的绝对值已经过去一样.

问:如果可以使用它们,那么什么是好的用例？

很难勾勒出具体的用例,因为它不经常使用并且使用非常有限.我认为潜在的潜在用途可能是通过在转换周期中跳转到不同的状态来重用转换.

以上是尤其当你使用真正的动画,因为他们都在重复违反过渡.当您使用动画时,负延迟可以允许您跳转到动画的某些点,并允许跨多个共享行为的元素的重用能力,而不是时间.以下面的例子(在这里找到):

div {
  border-radius:50%;
  position:absolute;
  top:50%; left:75%;
}
div:nth-of-type(odd) { background:black; }
div:nth-of-type(even) { background:white; border:2px solid black; }
div:nth-of-type(11) {
  height:10px; width:10px;
  margin-top:-5px; margin-left:-5px;
  -webkit-animation:slide 3s ease-in-out infinite;
  animation:slide 3s ease-in-out infinite;
}
div:nth-of-type(10) {
  height:20px; width:20px;
  margin-top:-12px; margin-left:-12px;
  -webkit-animation:slide 3s -2.7s ease-in-out infinite;
  animation:slide 3s -2.7s ease-in-out infinite;
}
div:nth-of-type(9) {
  height:40px; width:40px;
  margin-top:-20px; margin-left:-20px;
  -webkit-animation:slide 3s -2.4s ease-in-out infinite;
  animation:slide 3s -2.4s ease-in-out infinite;
}
div:nth-of-type(8) {
  height:60px; width:60px;
  margin-top:-32px; margin-left:-32px;
  -webkit-animation:slide 3s -2.1s ease-in-out infinite;
  animation:slide 3s -2.1s ease-in-out infinite;
}
div:nth-of-type(7) {
  height:80px; width:80px;
  margin-top:-40px; margin-left:-40px;
  -webkit-animation:slide 3s -1.8s ease-in-out infinite;
  animation:slide 3s -1.8s ease-in-out infinite;
}
div:nth-of-type(6) {
  height:100px; width:100px;
  margin-top:-52px; margin-left:-52px;
  -webkit-animation:slide 3s -1.5s ease-in-out infinite;
  animation:slide 3s -1.5s ease-in-out infinite;
}
div:nth-of-type(5) {
  height:120px; width:120px;
  margin-top:-60px; margin-left:-60px;
  -webkit-animation:slide 3s -1.2s ease-in-out infinite;
  animation:slide 3s -1.2s ease-in-out infinite;
}
div:nth-of-type(4) {
  height:140px; width:140px;
  margin-top:-72px; margin-left:-72px;
  -webkit-animation:slide 3s -0.9s ease-in-out infinite;
  animation:slide 3s -0.9s ease-in-out infinite;
}
div:nth-of-type(3) {
  height:160px; width:160px;
  margin-top:-80px; margin-left:-80px;
  -webkit-animation:slide 3s -0.6s ease-in-out infinite;
  animation:slide 3s -0.6s ease-in-out infinite;
}
div:nth-of-type(2) {
  height:180px; width:180px;
  margin-top:-92px; margin-left:-92px;
  -webkit-animation:slide 3s -0.3s ease-in-out infinite;
  animation:slide 3s -0.3s ease-in-out infinite;
}
div:nth-of-type(1) {
  height:200px; width:200px;
  margin-top:-100px; margin-left:-100px;
  -webkit-animation:slide 3s ease-in-out infinite;
  animation:slide 3s ease-in-out infinite;
}
@keyframes slide {
  0% { left:75% }
  50% { left:25%; }
  100% { left:75%; }
}
@-webkit-keyframes slide {
  0% { left:75% }
  50% { left:25%; }
  100% { left:75%; }
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

这里,animation-delay通过跳转到动画周期中的不同状态来利用负值.所有的圆圈都有相同的行为,来回来回,但不同的时间,因为他们模拟波.负值animation-delay使圆圈在不同时间移动,进一步进入动画循环.