Как сделать слайд анимацию с CSS (пример в ссылках)

Question

Я сделал анимацию в Figma, но я не знаю, как сделать это с помощью css: (

Я пытался изменить высоту, но текст не скрывается под заголовком, как исправить это? Изображение

Это ссылка на анимацию в figma (анимация на figma работает не очень хорошо, но смысл понятен) https://imgur.com/kUStXxK

.reviewPost {
  //   height: 1400px;
  max-width: 1300px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.15);
  border-radius: 15px;
  align-self: center;

  .reviewPostHeader {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 250px;
    width: 1300px;
    background: rgb(255, 199, 199);
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
    border-radius: 15px;

    .reviewPostInfo {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 30px;
      width: 750px;
      background: #fff;
      border-radius: 15px 15px 0 0;
      font-size: 20px;
    }
  }
  .reviewPostBody {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    .reviewPostDesc {
      margin: 46px 56px;

      .reviewPostDescHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .reviewPostDescTitle {
          font-weight: 500;
          font-size: 48px;
        }

        .reviewPostDescDate,
        .reviewPostDescRead {
          font-weight: 500;
          font-size: 24px;
        }
      }

      .reviewPostDescBody {
        .reviewPostDescIntro {
          margin: 50px 0 0 0;

          .reviewPostDescIntroTitle {
            font-weight: 500;
            font-size: 30px;
          }
          .reviewPostDescIntroDesc {
            font-size: 20px;
          }
        }

        .reviewPostDescTable {
          display: flex;
          justify-content: space-evenly;
          //   align-items: center;
          margin: 50px 0 0 0;

          .reviewPostDescTablePros {
            .tableHeader {
              font-weight: 500;
              font-size: 30px;
            }

            .tableBody {
              margin: 48px 0 0 0;
              font-size: 25px;

              ul {
                li {
                  margin-top: 12px;
                }
              }
            }
          }

          .reviewPostDescTableLine {
            background: black;
            width: 3px;
            height: 396px;
          }

          .reviewPostDescTableCons {
            .tableHeader {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              font-weight: 500;
              font-size: 30px;
            }

            .tableBody {
              margin: 48px 0 0 0;
              font-size: 25px;

              ul {
                li {
                  margin-top: 12px;
                }
              }
            }
          }
        }

        .reviewPostDescAdvice {
          margin: 50px 0 0 0;

          .reviewPostDescAdviceTitle {
            font-weight: 500;
            font-size: 30px;
          }
          .reviewPostDescAdviceDesc {
            font-size: 20px;
          }
        }
      }

      .reviewPostDescFooter {
        display: flex;
        margin: 50px 0 0 0;

        .reviewPostDescViews,
        .reviewPostDescRating {
          font-weight: 500;
          font-size: 24px;
        }

        .reviewPostDescRating {
          margin-left: 20px;
        }
      }
    }
  }
}

<div className='reviewPost'>
                <div className='reviewPostHeader'>
                    <div className='reviewPostImage'></div>
                    <div className='reviewPostInfo'>
                        <div className='reviewPostInfoRating'>Rating: ***** 4</div>
                        <div className='reviewPostInfoViews'>Views: 325</div>
                        <div className='reviewPostInfoRead'>Read: 5 MIN</div>
                        <div className='reviewPostInfoDate'>Date: 12.03.2020</div>
                    </div>
                </div>
                <div className='reviewPostBody'>
                    <div className='reviewPostDesc'>
                        <div className="reviewPostDescHeader">
                            <div className="reviewPostDescDate">Date: 12.03.2020</div>
                            <div className="reviewPostDescTitle">Mc'Donalds cashier</div>
                            <div className="reviewPostDescRead">Read: 5 MIN</div>
                        </div>
                        <div className="reviewPostDescBody">
                            <div className="reviewPostDescIntro">
                                <div className="reviewPostDescIntroTitle">Introduction</div>
                                <div className="reviewPostDescIntroDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna mauris tortor quam malesuada congue consectetur amet, faucibus sem. Feugiat duis auctor justo nullam. Non ac ut quam libero etiam massa aliquam, nulla. Fermentum, arcu erat nibh posuere suspendisse magnis. Sit vitae sit ac nunc dignissim. Eu risus, molestie vel nec venenatis. Bibendum tristique sit pulvinar faucibus nunc purus, euismod. Quisque aliquam ut sed sit aenean. Eu cras tincidunt aliquet velit, libero.</div>
                            </div>
                            <div className="reviewPostDescTable">
                                <div className="reviewPostDescTablePros">
                                    <div className="tableHeader">Pros</div>
                                    <div className="tableBody">
                                        <ul>
                                            <li>1234</li>
                                            <li>1234</li>
                                            <li>1234</li>
                                        </ul>
                                    </div>
                                </div>
                                <div className='reviewPostDescTableLine'></div>
                                <div className="reviewPostDescTableCons">
                                    <div className="tableHeader">Cons</div>
                                    <div className="tableBody">
                                        <ul>
                                            <li>5678</li>
                                            <li>5678</li>
                                            <li>5678</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div className="reviewPostDescAdvice">
                                <div className="reviewPostDescAdviceTitle">Advice to management</div>
                                <div className="reviewPostDescAdviceDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna mauris tortor quam malesuada congue consectetur amet, faucibus sem. Feugiat duis auctor justo nullam. Non ac ut quam libero etiam massa aliquam, nulla. Fermentum, arcu erat nibh posuere suspendisse magnis. Sit vitae sit ac nunc dignissim. Eu risus, molestie vel nec venenatis. Bibendum tristique sit pulvinar faucibus nunc purus, euismod. Quisque aliquam ut sed sit aenean. Eu cras tincidunt aliquet velit, libero.</div>
                            </div>
                        </div>
                        <div className="reviewPostDescFooter">
                            <div className='reviewPostDescViews'>Views: 325</div>
                            <div className='reviewPostDescRating'>Rating: ***** 4</div>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

<style>
    .reviewPost {
        max-width: 1300px;
        background: #fff;
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.15);
        border-radius: 15px;
        align-self: center;
    }

    .reviewPost .reviewPostHeader {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 250px;
        width: 1300px;
        background: #ffc7c7;
        box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
        border-radius: 15px;
    }

    .reviewPost .reviewPostHeader .reviewPostInfo {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 30px;
        width: 750px;
        background: #fff;
        border-radius: 15px 15px 0 0;
        font-size: 20px;
    }

    .reviewPost .reviewPostBody {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
    }

    .reviewPost .reviewPostBody {
        padding: 46px 56px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescHeader .reviewPostDescTitle {
        font-weight: 500;
        font-size: 48px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescHeader .reviewPostDescDate,
    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescHeader .reviewPostDescRead {
        font-weight: 500;
        font-size: 24px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescIntro {
        margin: 50px 0 0 0;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescIntro .reviewPostDescIntroTitle {
        font-weight: 500;
        font-size: 30px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescIntro .reviewPostDescIntroDesc {
        font-size: 20px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescTable {
        display: flex;
        justify-content: space-evenly;
        margin: 50px 0 0 0;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescTable .reviewPostDescTablePros .tableHeader {
        font-weight: 500;
        font-size: 30px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescTable .reviewPostDescTablePros .tableBody {
        margin: 48px 0 0 0;
        font-size: 25px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescTable .reviewPostDescTablePros .tableBody ul li {
        margin-top: 12px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescTable .reviewPostDescTableLine {
        background: black;
        width: 3px;
        height: 396px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescTable .reviewPostDescTableCons .tableHeader {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-weight: 500;
        font-size: 30px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescTable .reviewPostDescTableCons .tableBody {
        margin: 48px 0 0 0;
        font-size: 25px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescTable .reviewPostDescTableCons .tableBody ul li {
        margin-top: 12px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescAdvice {
        margin: 50px 0 0 0;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescAdvice .reviewPostDescAdviceTitle {
        font-weight: 500;
        font-size: 30px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescBody .reviewPostDescAdvice .reviewPostDescAdviceDesc {
        font-size: 20px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescFooter {
        display: flex;
        margin: 50px 0 0 0;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescFooter .reviewPostDescViews,
    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescFooter .reviewPostDescRating {
        font-weight: 500;
        font-size: 24px;
    }

    .reviewPost .reviewPostBody .reviewPostDesc .reviewPostDescFooter .reviewPostDescRating {
        margin-left: 20px;
    }
</style>
<div class='reviewPost'>
    <div class='reviewPostHeader'>
        <div class='reviewPostImage'></div>
        <div class='reviewPostInfo'>
            <div class='reviewPostInfoRating'>Rating: ***** 4</div>
            <div class='reviewPostInfoViews'>Views: 325</div>
            <div class='reviewPostInfoRead'>Read: 5 MIN</div>
            <div class='reviewPostInfoDate'>Date: 12.03.2020</div>
        </div>
    </div>
    <div class='reviewPostBody'>
        <div class='reviewPostDesc'  id="reviewPostDesc">
            <div class="reviewPostDescHeader">
                <div class="reviewPostDescDate">Date: 12.03.2020</div>
                <div class="reviewPostDescTitle">Mc'Donalds cashier</div>
                <div class="reviewPostDescRead">Read: 5 MIN</div>
            </div>
            <div class="reviewPostDescBody">
                <div class="reviewPostDescIntro">
                    <div class="reviewPostDescIntroTitle">Introduction</div>
                    <div class="reviewPostDescIntroDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Urna mauris tortor quam malesuada congue consectetur amet, faucibus sem. Feugiat duis auctor
                        justo nullam. Non ac ut quam libero etiam massa aliquam, nulla. Fermentum, arcu erat nibh
                        posuere suspendisse magnis. Sit vitae sit ac nunc dignissim. Eu risus, molestie vel nec
                        venenatis. Bibendum tristique sit pulvinar faucibus nunc purus, euismod. Quisque aliquam ut sed
                        sit aenean. Eu cras tincidunt aliquet velit, libero.</div>
                </div>
                <div class="reviewPostDescTable">
                    <div class="reviewPostDescTablePros">
                        <div class="tableHeader">Pros</div>
                        <div class="tableBody">
                            <ul>
                                <li>1234</li>
                                <li>1234</li>
                                <li>1234</li>
                            </ul>
                        </div>
                    </div>
                    <div class='reviewPostDescTableLine'></div>
                    <div class="reviewPostDescTableCons">
                        <div class="tableHeader">Cons</div>
                        <div class="tableBody">
                            <ul>
                                <li>5678</li>
                                <li>5678</li>
                                <li>5678</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="reviewPostDescAdvice">
                    <div class="reviewPostDescAdviceTitle">Advice to management</div>
                    <div class="reviewPostDescAdviceDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Urna mauris tortor quam malesuada congue consectetur amet, faucibus sem. Feugiat duis auctor
                        justo nullam. Non ac ut quam libero etiam massa aliquam, nulla. Fermentum, arcu erat nibh
                        posuere suspendisse magnis. Sit vitae sit ac nunc dignissim. Eu risus, molestie vel nec
                        venenatis. Bibendum tristique sit pulvinar faucibus nunc purus, euismod. Quisque aliquam ut sed
                        sit aenean. Eu cras tincidunt aliquet velit, libero.</div>
                </div>
            </div>
            <div class="reviewPostDescFooter">
                <div class='reviewPostDescViews'>Views: 325</div>
                <div class='reviewPostDescRating'>Rating: ***** 4</div>
            </div>
        </div>
    </div>

<script>
document.getElementById('reviewPostDesc').animate([
    {
        offset: 0,
        transform: 'translateY(-100%)'
    }, {
        transform: 'translateY(0)'
    }
], {
    delay: 0, // change delay if you want (in ms)
    duration: 1000,
    fill: 'forwards'
})
</script>
</div>