@ionic/core/dist/collection/components/ripple-effect/ripple-effect.css

Base components for Ionic

:host {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  contain: strict;
  pointer-events: none;
}

:host(.unbounded) {
  contain: layout size style;
}

.ripple-effect {
  border-radius: 50%;
  position: absolute;
  background-color: currentColor;
  color: inherit;
  contain: strict;
  opacity: 0;
  animation: 225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;
  will-change: transform, opacity;
  pointer-events: none;
}

.fade-out {
  transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
  animation: 150ms fadeOutAnimation forwards;
}

@keyframes rippleAnimation {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
  }
  to {
    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
  }
}
@keyframes fadeInAnimation {
  from {
    animation-timing-function: linear;
    opacity: 0;
  }
  to {
    opacity: 0.16;
  }
}
@keyframes fadeOutAnimation {
  from {
    animation-timing-function: linear;
    opacity: 0.16;
  }
  to {
    opacity: 0;
  }
}