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

Question

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

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

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

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

我走错路了吗？

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

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

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

Answer 1

问题是您将 -webkit- 设置为 --webkit- 我在下方修复了 CSS。

CSS

#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;
}


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

Code Pen Demo

Answer 2

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

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

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

Is there a conflict between setting initial visibility and animating visibility for one element?

html

css

css-animations