Modern CSS Animations

Keyframe animations for cards, icons, loaders and headings - drop a class on an element and it comes alive.

1Particle Float

Fills a card or panel with small glowing particles that rise behind its content. Class: fx-particle-float

One platform for every workflow

Particles drift up behind the content.

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <div class="fx-particle-float rounded-4 border p-4 text-center w-100" style="max-width:18rem">
    <div class="fs-2 text-primary">
      <i class="bi bi-stars" aria-hidden="true"></i>
    </div>
    <h3 class="h5 mb-1">One platform for every workflow</h3>
    <p class="small text-body-secondary mb-0">Particles drift up behind the content.</p>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-particle-float { position: relative; isolation: isolate; overflow: hidden; }
.fx-particle-float::before, .fx-particle-float::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(var(--wt-primary-rgb), .7) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 80%, rgba(var(--wt-accent-rgb), .7) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 45%, rgba(var(--wt-secondary-rgb), .6) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 15%, rgba(var(--wt-primary-rgb), .6) 0 3px, transparent 4px);
  background-size: 160px 160px;
  animation: fx-particle-float-rise 10s linear infinite;
}
.fx-particle-float::after { background-size: 230px 230px; opacity: .6; animation: fx-particle-float-rise-slow 16s linear infinite; }
@keyframes fx-particle-float-rise { to { background-position: 0 -160px; } }
@keyframes fx-particle-float-rise-slow { to { background-position: 0 -230px; } }
@media (prefers-reduced-motion: reduce) {
  .fx-particle-float, .fx-particle-float::before, .fx-particle-float::after, .fx-particle-float *, .fx-particle-float *::before, .fx-particle-float *::after { animation: none !important; transition: none !important; }
}

2Heartbeat

A double-beat pulse for like buttons, favourite icons and notification badges. Class: fx-heartbeat

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <span class="display-4 text-danger fx-heartbeat"><i class="bi bi-heart-fill" aria-hidden="true"></i></span> 
  <button type="button" class="btn btn-outline-danger rounded-pill"><span class="fx-heartbeat"><i class="bi bi-heart-fill" aria-hidden="true"></i></span> 361 likes</button>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-heartbeat { display: inline-block; animation: fx-heartbeat-beat 1.5s ease-in-out infinite; transform-origin: center; }
@keyframes fx-heartbeat-beat {
  0%, 40%, 100% { transform: scale(1); }
  12% { transform: scale(1.2); }
  24% { transform: scale(.96); }
  32% { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-heartbeat, .fx-heartbeat::before, .fx-heartbeat::after, .fx-heartbeat *, .fx-heartbeat *::before, .fx-heartbeat *::after { animation: none !important; transition: none !important; }
}