Question

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

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

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

淡出没有问题，但是pop-in永远不会有效。当我尝试为可见性设置动画时，无论如何，页面始终加载所选文本，尽管其早期设置为隐藏。因此，它不会弹出。它已经在页面上了。下面是代码和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为可见。删除pop-in动画修复了这个问题。＃two-container的淡出动画效果很好。我错过了什么？

明确一点：我不希望 - 这里有许多其他人 - 因为褪色动画的可见性。我希望突然显示所需的文本，并且AFTERWARDS逐渐淡出 - 因此第二个动画选择<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

Answer 2

问题是您将-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

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

2 个答案: