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

Question

EDIT: Fixed a typo in CSS marked with ARLCode below - it doesn't matter. Using only CSS, I try to animate some text, so that various blocks of text begin to hide, become visible by timer, and then gradually disappear by timer.

First, I start with all the text hidden with p {visibility: hidden}, and add animation to change the visibility value after n seconds.

In addition, I invested <p>in <div>and added animation to wipe <div>, animating the opacity. This should lead to the disappearance of the newly appeared text after (n + x) seconds.

Attenuation is not a problem, but the pop-up never works. When I try to animate visibility, regardless of whether the page always loads with the selected text, even though its previous setting is hidden. So he does not appear. It’s just already on the page. Below is the code and link to codepen.

Am I really wrong?

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

Pen Code Demo

You can see in the preview that the page loads #two as visible, despite the p {visibility:hidden;}general section. This eliminates the removal of pop-up animations. Animation scaling for # two-container works great. What am I missing?

: - - , . , , - , <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

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

Pen Demo