title: Hide one element and show another at the same time with CSS only?
body: <p>I found this question and associated answer: <a href="https://stackoverflow.com/questions/46798683/css-hide-element-after-5-seconds-show-it">CSS hide element, after 5 seconds show it</a></p>
  <p>However I am trying to hide element a, and reveal element b at the same time.</p>
  <p>Please see my current code:</p>
  <pre><code>#showthiscolumn {
    animation: cssAnimation 0s 5s forwards;
    visibility: hidden;
  }
  
  @keyframes cssAnimation {
    to   { visibility: visible; }
  }
  
  
  #hidethiscolumn {
    animation: cssAnimation 0s 5s forwards;
    visibility: visible;
  }
  
  @keyframes cssAnimation {
    to   { visibility: hidden; }
  }
  </code></pre>
  <p>The <code>#hidethiscolumn</code> element works, but <code>#showthiscolumn</code> content never appears.</p>