فرض کنید که المان html  زیر را تعریف کرده ایم:

<div class="slide-down">
  <!-- Your content here -->
</div>

برای اینکه این المان را با انیمیشن css و بصورت slide down نشان دهیم ، می توانیم از کد زیر استفاده کنیم:

.slide-down {
  position: relative; /* Ensure the element stays within the layout */
  animation: slideDownAnimation 1s ease-in-out forwards; /* Use desired duration and easing */
}

@keyframes slideDownAnimation {
  0% {
    transform: translateY(-100%); /* Start position off the top */
  }
  100% {
    transform: translateY(0); /* End position at its original location */
  }
}