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

提问者：小点点

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

编辑：更正了下面ARLCode注意到的CSS中的一个错别字-不相关。只使用CSS，我尝试动画一些文本，这样不同的文本块开始隐藏，在计时器上变得可见，然后在计时器上淡出，按顺序。

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

此外，我在

中嵌套了

并添加了一个动画，通过动画化不透明度来淡化

。这将在(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; }
}

代码笔演示

您可以在预览中看到，页面将#two加载为可见的，尽管在general部分中有p{visibility：hidden；}。移除弹出动画可以解决这个问题。#双容器的淡出动画工作良好。我错过了什么？

明确一点：我并不期望--这里的许多其他人也有这样的期望--可见性会像淡色一样活跃。我希望所需的文本突然出现，然后逐渐褪色--因此第二个动画选择

。可见性的二进制性质很好。

共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); }
}

代码本演示