title: Animate displaying element on the page with CSS/SCSS
body: <p>I'm wanting to animate a sequence of divs appearing on the page, one by one. I have an animation delay set up on all of them, and the animation is being applied at the correct times for each one.</p>
  
  <p>But! What I want to animate is <code>display: block</code> to <code>display: none</code>, which I know isn't possible. I've tried the <code>visibility: hidden</code> + <code>opacity: 0</code> + <code>height</code> and animating those in, but that doesn't position the elements the way I want to, because they go straight to the ending position where they ultimately end up on the page once everything's in, rather than pushing each other out of the way like I would want with a display animation.</p>
  
  <p>How I can get them each to start in one spot and push each other out of the way until the end of the animation without JavaScript or manually positioning?</p>
  
  <p>My current SCSS code (there are 14 <code>text</code> divs to be animated in):</p>
  
  <pre><code>.text-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5px;
    width: 100%;
    height: 170px;
    box-sizing: border-box;
    overflow: hidden;
    .text {
      visibility: hidden;
      opacity: 0;
      max-height: 0;
      align-self: flex-start;
      margin: 3px 3px 0;
      padding: 5px;
      max-width: 80%;
      box-sizing: border-box;
      animation: 7s text-bubble infinite;
    }
    // ------------ animation delay
    @for $i from 1 through 14 {
      .text {
        &amp;:nth-child(#{$i}) {
          animation-delay: $i * 1s;
        }
      }
    }
    // ------------
  }
  @keyframes text-bubble {
    0% {
      visibility: hidden;
      opacity: 0;
      max-height: 0;
      transform: scale(1);
    }
    50% {
      visibility: visible;
      opacity: 1;
      max-height: 170px;  
      transform: scale(1.15);
    }
    100% {
      visibility: visible;
      opacity: 1;
      max-height: 170px;
      transform: scale(1);
    }
  }
  </code></pre>