title: Is there a conflict between setting initial visibility and animating visibility for one element?
body: <p><strong>EDIT: corrected a typo in the CSS noted by <a href="https://stackoverflow.com/users/2313967/arlcode">ARLCode</a> below - not relevant.</strong>
  Using only CSS, I'm trying to animate some text, so that different blocks of text start hidden, become visible on a timer, and then fade on a timer, in sequence.</p>
  
  <p>First, I start with all of the text hidden using <code>p {visibility: hidden}</code>, and add an animation to change the visibility value after <em>n</em> seconds. </p>
  
  <p>In addition, I nested <code>&lt;p&gt;</code> in <code>&lt;div&gt;</code> and added an animation to fade <code>&lt;div&gt;</code> by animating opacity. This should fade the text that had just appeared, after (<em>n</em>+<em>x</em>) seconds.</p>
  
  <p>The fade-out is no problem, but the pop-in never works. When I try to animate visibility, no matter how, the page always loads with the selected text visible, despite its earlier setting as hidden. Thus, it doesn't pop-in. It's just already there on the page. Below is the code and a link to codepen.</p>
  
  <p>Am I on the wrong track?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;p id="one"&gt;this is visible on page load and then fades&lt;/p&gt;
  
  &lt;div id="two-container"&gt; &lt;!---this div is for fading the text---&gt;
    &lt;p id="two"&gt;this should START hidden, then appear AFTER p one fades&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/***************************************
                  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></pre>
  
  <p><a href="http://codepen.io/jfphilosophy/full/pJEpzQ/" rel="nofollow noreferrer"><strong>Code Pen Demo</strong></a></p>
  
  <p>You can see in the preview that the page loads #two as visible, despite <code>p {visibility:hidden;}</code> in the general section. Removing the pop-in animation fixes this. The fade-out animation for #two-container works fine. What am I missing?</p>
  
  <p><strong>A point of clarity: I do NOT expect - as many others here have - for visibility to animate as a fade. I want the desired text to <em>appear</em> suddenly, and AFTERWARDS fade gradually - thus the second animation selecting <code>&lt;div&gt;</code>. The binary nature of visibility is fine.</strong></p>