AI CSS Animations

Ping

A copy of the shape swells out from behind the element and fades, like a radar blip or a live notification dot. The ring is a ::before behind the content, so the element itself never moves.

Also known as: ping animation css, radar ping effect, tailwind animate ping.

Ping

HTML

<div class="kfa-ping">Ping</div>

CSS

.kfa-ping {
  --c: var(--kfa-color, #3b82f6);
  font-size: var(--kfa-size, 16px);
  display: grid;
  place-items: center;
  width: 5.5em;
  height: 5.5em;
  border-radius: 1em;
  background: var(--c);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  box-shadow: 0 0.6em 1.4em -0.6em color-mix(in srgb, var(--c) 70%, transparent);
  position: relative;
  isolation: isolate;
}
.kfa-ping::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c);
  animation: kfa-ping-ring 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes kfa-ping-ring {
  0% { transform: scale(1); opacity: 0.75; }
  75%, 100% { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kfa-ping, .kfa-ping *, .kfa-ping::before, .kfa-ping::after, .kfa-ping *::before, .kfa-ping *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwind CSS version

The same effect using Tailwind utility classes. No custom CSS or config needed.

<div class="relative isolate grid h-[5.5em] w-[5.5em] place-items-center rounded-[1em] bg-blue-500 font-bold text-white">
  <span class="absolute inset-0 -z-10 animate-ping rounded-[1em] bg-blue-500/75" aria-hidden="true"></span>
  Ping
</div>

Customizing this snippet

  • Color: set --kfa-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --kfa-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar keyframe animations

Heartbeat
Pulse
Spin
Float