Spinning Bouncing Notification

A pure-CSS notification with spin, SVG and bounce effects, animating only GPU-friendly properties.

GPU-friendly
No JS
Reduced-motion ready
701 B gzip

Community animation · MIT License

What PasteMotion changed

Reduced-motion fallback added by PasteMotion.

WidthFull

Code

index.html

<!-- © 2023 Uiverse.io · MIT License -->
<div class="notification">
  <svg viewBox="0 0 100 100" class="trophy">
    <g>
      <path d="M10,50 L40,50 L30,10 L20,10 Z"></path>
      <path d="M60,50 L90,50 L80,10 L70,10 Z"></path>
      <path d="M20,10 L80,10 L70,30 L30,30 Z"></path>
      <path d="M30,30 L70,30 L60,50 L40,50 Z"></path>
      <path d="M25,75 L75,75 L85,90 L15,90 Z"></path>
      <path d="M40,50 L60,50 L55,70 L45,70 Z"></path>
    </g>
  </svg>
  <p>Congratulations!
  </p><p>You reached level 10!</p>
</div>

How to use it

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.