JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<div class="square"></div>

CSS

.container {
  height: 100px; /* Установим фиксированную высоту контейнера, чтобы изначально обозначить размер квадрата */
  
}

.square {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.5s; /* Добавим переход для свойства transform */
}

/* Создаем анимацию для класса .active */
@keyframes shrink {
  0% {
    transform: translateY(0); /* Изначально смещаем квадрат на 0 пикселей */
  }
  100% {
    transform: translateY(80px); /* Смещаем квадрат вниз на 80 пикселей, чтобы его верхняя часть уменьшилась */
    height: 20px; /* Изменяем высоту квадрата */
  }
}

/* Применяем анимацию при добавлении класса .active */
.square:hover {
  animation: shrink 0.5s forwards;
}