Hop Over Notification Badge


My latest Pen ‘Hop Over Notification Badge’, over on CodePen is a subtle z-index based CSS animation, creating a notification-type badge hop over effect.

Inspired by a tutorial on WebTuts, ‘Menu Notification Badges Using HTML5 Data-Attributes’, the effect utilises CSS @keyframe animation, transition, transform and HTML5 data-* attributes to create a hop over animation to highlight badges, counters or user alerts.

All Posts