Question

我正在尝试动画从display:none;opacity:0;到display:block;opacity:1;的元素。虽然下面的动画工作，当我在动画中引入延迟时，我发现我无法将延迟值设置为高于动画持续时间值。当我这样做时，动画将被忽略。

如何设置延迟时间，例如2秒，我的动画持续时间是300毫秒，没有它打破？

＆＃13;

    div p + p {
      display: none;
      opacity: 0;
    }  
    div p:hover + p {
      display: block;
      opacity: 1;
      /* browser prefixes removed for brevity */
      -webkit-animation: fadeInFromNone 300ms 900ms linear;
      animation: fadeInFromNone 300ms 900ms linear;
    }
    div.working p:hover + p {
      display: block;
      opacity: 1;
      /* browser prefixes removed for brevity */
      -webkit-animation: fadeInFromNone 300ms 300ms linear;
      animation: fadeInFromNone 300ms 300ms linear;
    }

    @-webkit-keyframes fadeInFromNone {
      0% {
        display: none; 
        opacity: 0;
      }
      1% {
        display: block ; 
        opacity: 0;
      }
      100% {
        display: block ; 
        opacity: 1;
      }
    }
    keyframes fadeInFromNone {
      0% {
        display: none; 
        opacity: 0;
      }
      1% {
        display: block ; 
        opacity: 0;
      }
      100% {
        display: block ; 
        opacity: 1;
      }
    }

＆＃13;

    <div>
      <p>Hover on me (broken)</p>
      <p>Peek-a-boo</p>
    </div>
    <div class="working">
      <p>Hover on me (working)</p>
      <p>Peek-a-boo</p>
    </div>

＆＃13;

Answer 1

这归结为时间问题。

最初，p有display:none;和opacity:0;。在悬停时，p有display:block;和opacity:1;，然后，在延迟后，动画开始时会重置为display:none;和opacity:0;。

通过将悬停p设置为display:block;并仅设置不透明度的动画，我几乎可以获得所需的结果。要停止动画完成并再次将p设置为opacity:0，我会将forwards属性添加到动画中：

＆＃13;

div p + p {
    display: none;
    opacity: 0;
}  
div p:hover + p {
    display: block;
    /* browser prefixes removed for brevity */
    -webkit-animation: fadeInFromNone 300ms linear 900ms forwards;
    animation: fadeInFromNone 300ms linear 900ms forwards;
}

@-webkit-keyframes fadeInFromNone {
    from { opacity:0; }
    to { opacity:1; }
}
keyframes fadeInFromNone {
    from { opacity:0; }
    to { opacity:1; }
}

＆＃13;

<div>
      <p>Hover on me</p>
      <p>Peek-a-boo</p>
    </div>

＆＃13;

Answer 2

为什么我可以在使用过渡时使用动画来获得不透明度？我做动画的主要原因是得到显示：阻止/无法工作，但在我的另一个答案中它仍然无法正常工作。在这个答案中，我使用visibility:hidden/visible和opacity:0/1作为动画。转换是如此悬停，转换需要1秒才能启动（请注意悬停代码上的transition-delay），而在鼠标移出时，不透明度将在近一秒内淡出，可见性将停止显示但是它的延迟与不透明度持续时间相同。

这给了我想要的可爱的延迟淡入/立即淡出。

div p + p {
  visibility:hidden;
  opacity: 0;
  /* browser prefixes removed for brevity */
  transition:visibility 0s linear 900ms, opacity 900ms linear;
}
div p:hover + p {
  visibility:visible;
  opacity:1;
  /* browser prefixes removed for brevity */
  transition-delay:1s;
}

<div>
  <p>Hover on me</p>
  <p>Peek-a-boo</p>
</div>

CSS3动画延迟超过持续时间中断动画

2 个答案: