Animate css slideInDown

Question

I am using animate.cs from

https://animate.style/

And trying to create some sliding animation with class slideInUp and slideInDown, when i Want to use some slideInUp element goes nice from bottom to up. The problem I have is when i want slideInDown it loooks like entire element just goes up overflow and entire element on animation is visibile and scrolling to bottom with entire content. All I need is that he just slide in down and not from top of page, just from position that he is

Here is properties fro slideInDown

  @-webkit-keyframes slideInDown {
    from {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes slideInDown {
    from {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .animate__slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
  }

I need just element to scroll down from current position not from top of page, thanks

Here is working fiddle https://jsfiddle.net/1fbwrqgp/1/

You will see that slide div slide down from top of page i want to slide from parent and not from top

Answer 1

What about the following?

@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.css"); /* Using a url */

.scroll-div{
  height: 100px;
  background-color: red;
  position: absolute;
  bottom: 0;
  width: 100%;
  top: 200px;
}

<div class='animate__animated animate__slideInDown scroll-div'>

</div>

What is changed? I put top: 200px on .scroll-div to make it appears after the window top, also I modified height: 200px to height: 100px to make for you the animation more evident