html - 为一个元素设置初始可见性和动画可见性之间是否存在冲突？

Question

编辑:更正了 ARLCode 指出的 CSS 中的拼写错误以下 - 不相关。仅使用 CSS，我尝试为一些文本设置动画，以便不同的文本 block 开始隐藏，在计时器上可见，然后在计时器上按顺序淡出。

首先，我从使用 p {visibility: hidden} 隐藏的所有文本开始，并添加动画以在 n 秒后更改可见性值。

另外，我嵌套了<p>在 <div>并添加了淡入淡出的动画 <div>通过动画不透明度。这应该会在 (n+x) 秒后淡化刚刚出现的文本。

淡出没有问题，但弹出永远不起作用。当我尝试为可见性设置动画时，无论如何，页面总是加载可见的选定文本，尽管其先前设置为隐藏。因此，它不会弹出。它已经在页面上了。下面是代码和 codepen 的链接。

我走错路了吗？

HTML

<p id="one">this is visible on page load and then fades</p>

<div id="two-container"> <!---this div is for fading the text--->
  <p id="two">this should START hidden, then appear AFTER p one fades</p>
</div>

CSS

/***************************************
                GENERAL
***************************************/

p {
  visibility: hidden;
}

/***************************************
        TEXT ANIMATION SEQUENCE
***************************************/

#one {
  visibility: visible;
  -webkit-animation-name: fade-out;
          animation-name: fade-out;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#two {
  -webkit-animation-name: pop-in;
          animation-name: pop-in;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#two-container {
  -webkit-animation-name: fade-out;
          animation-name: fade-out;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/***************************************
                ANIMATION KEYFRAMES
***************************************/

@-webkit-keyframes fade-out {
  0%, 50% {opacity: 1; }
  100% {opacity: 0; }
}

@-webkit-keyframes pop-in {
  0% {visibility: hidden; }
  100% {visibility: visible; }
}

Code Pen Demo

尽管 p {visibility:hidden;}，您可以在预览中看到页面加载#two 时可见。在一般部分。删除弹出式动画可以解决此问题。 #two-container 的淡出动画效果很好。我错过了什么？

需要澄清的一点:我不希望 - 正如这里的许多其他人一样 - 可见性会随着淡入淡出而动画化。我希望所需的文本突然出现，然后逐渐淡出 - 因此第二个动画选择 <div> .可见性的二元性质很好。

Answer 1

好的，给你，我想这就是你想要的效果。

CSS

#one {
  visibility: visible;
  -webkit-animation-name: fade-out;
          animation-name: fade-out;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
      -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#two {
  visibility: hidden;
    -webkit-animation: pop-in 2s;
    -webkit-animation-delay: 4s;
       -moz-animation: pop-in 2s;
        -ms-animation: pop-in 2s; 
         -o-animation: pop-in 2s; 
          animation: pop-in 2s; 
      -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fade-out {
  from {opacity: 1; }
  to {opacity: 0; }
}

@-webkit-keyframes pop-in {
0% { visibility: visible; opacity: 0; -webkit-transform: scale(0.5); }
100% { visibility: visible; opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes pop-in {
0% { visibility: visible; opacity: 0; -moz-transform: scale(0.5); }
100% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes pop-in {
0% { visibility: visible; opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}

Codepen Demo