ar-design/dist/assets/css/core/variants/animation.css

AR Design is a (react | nextjs) ui library.

/* #region Animation -> PRIMARY */
@keyframes clicked-primary {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 0 7.5px rgba(var(--primary-rgb), 0);
  }
}
/* #endregion */
/* Animation -> PRIMARY */

/* #region Animation -> PRIMARY-LIGHT */
@keyframes clicked-primary-light {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--primary-light-rgb), 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(var(--primary-light-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 0 7.5px rgba(var(--primary-light-rgb), 0);
  }
}
/* #endregion */
/* Animation -> PRIMARY-LIGHT */

/* #region Animation -> SECONDARY */
@keyframes clicked-secondary {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--secondary-rgb), 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(var(--secondary-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 0 7.5px rgba(var(--secondary-rgb), 0);
  }
}
/* #endregion */
/* Animation -> SECONDARY */

/* #region Animation -> SUCCESS */
@keyframes clicked-success {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--success-rgb), 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 0 7.5px rgba(var(--success-rgb), 0);
  }
}
/* #endregion */
/* Animation -> SUCCESS */

/* #region Animation -> WARNING */
@keyframes clicked-warning {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--warning-rgb), 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 0 7.5px rgba(var(--warning-rgb), 0);
  }
}
/* #endregion */
/* Animation -> WARNING */

/* #region Animation -> DANGER */
@keyframes clicked-danger {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--danger-rgb), 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 0 7.5px rgba(var(--danger-rgb), 0);
  }
}
/* #endregion */
/* Animation -> DANGER */

/* #region Animation -> INFORMATION */
@keyframes clicked-information {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--information-rgb), 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 0 7.5px rgba(var(--information-rgb), 0);
  }
}
/* #endregion */
/* Animation -> INFORMATION */

/* #region Animation -> DARK */
@keyframes clicked-dark {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
  }
}
/* #endregion */
/* Animation -> DARK */

/* #region Animation -> LIGHT */
@keyframes clicked-light {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--light-rgb), 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(var(--light-rgb), 0.25);
  }
  100% {
    box-shadow: 0 0 0 7.5px rgba(var(--light-rgb), 0);
  }
}
/* #endregion */
/* Animation -> LIGHT */