Animation to the arrow

This is not a question – I just want to share some CSS that I added to one of my websites ??

I love the simplicity of this plugin, but needed some animation to the arrow on hover and active.

The CSS is written with AI … but it works for me ??

Feel free to use

//Lars, Copenhagen

/* Base styles for the scroll-top button image */
#wpfront-scroll-top-container img {
  transition: all 0.3s;
  box-sizing: border-box;
}

/* Scale effect on hover */
#wpfront-scroll-top-container:hover img { transform: scale(0.8, 1.3); }

/* Move up on click/active state */
#wpfront-scroll-top-container:active img { transform: translateY(-70px); }

/* Entrance animation keyframes */
@keyframes slideInBottom {
  0% { transform: translateY(100px); opacity: 0; } /* Start position */
  70% { transform: translateY(-10px); } /* Slight overshoot */
  100% { transform: translateY(0); opacity: 1; } /* Final position */
}

/* Apply entrance animation to the container */
#wpfront-scroll-top-container {
  animation: slideInBottom 0.5s ease-out forwards;
  opacity: 0;
}

/* Ensure visibility when the show class is added */
#wpfront-scroll-top-container.wpfront-scroll-top-container-show {
  display: block !important;
}