New comment
Ana replied to your post
2m
Notification Card Hover
A notification row that nudges sideways as its bell rings with a damped swing, and the timestamp trades places with a dismiss button. The bell pivots from its top, like the real thing.
Also known as: notification toast hover, alert card css, bell ring animation card.
HTML
<article class="hfx-card-notification">
<span class="hfx-card-notification-bell"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15zM10 20.5a2 2 0 0 0 4 0"/></svg></span>
<div class="hfx-card-notification-text">
<h3>New comment</h3>
<p>Ana replied to your post</p>
</div>
<div class="hfx-card-notification-side">
<span class="hfx-card-notification-time">2m</span>
<button class="hfx-card-notification-close" aria-label="Dismiss"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 7 10 10M17 7 7 17"/></svg></button>
</div>
</article>CSS
.hfx-card-notification {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 15em;
border-radius: 0.75em;
overflow: hidden;
background: #fff;
border: 1px solid color-mix(in srgb, #000 10%, transparent);
color: #1f2937;
font-family: system-ui, sans-serif;
display: flex;
align-items: center;
gap: 0.8em;
box-sizing: border-box;
width: 17em;
padding: 0.8em 0.9em;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;}
.hfx-card-notification:is(:hover, :focus-within) {
transform: translateX(0.35em);
box-shadow: -0.35em 0.7em 1.2em -0.8em color-mix(in srgb, #000 35%, transparent);
}
.hfx-card-notification-bell {
position: relative;
display: grid;
flex: none;
place-items: center;
width: 2.3em;
height: 2.3em;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 12%, transparent);
color: var(--c);
}
.hfx-card-notification-bell::after {
content: "";
position: absolute;
top: 0.15em;
right: 0.15em;
width: 0.5em;
height: 0.5em;
border: 0.12em solid #fff;
border-radius: 50%;
background: var(--c);
}
.hfx-card-notification svg {
width: 1.2em;
height: 1.2em;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.hfx-card-notification-bell svg { transform-origin: 50% 12%; }
.hfx-card-notification:is(:hover, :focus-within) .hfx-card-notification-bell svg {
animation: hfx-card-notification-ring 0.9s ease-in-out both;
}
.hfx-card-notification-text {
flex: 1;
min-width: 0;
}
.hfx-card-notification h3 {
margin: 0;
font-size: 0.9em;
font-weight: 600;
}
.hfx-card-notification p {
margin: 0.1em 0 0;
font-size: 0.76em;
color: #6b7280;
}
.hfx-card-notification-side {
display: grid;
place-items: center;
}
.hfx-card-notification-side > * { grid-area: 1 / 1; }
.hfx-card-notification-time {
font-size: 0.72em;
color: #9ca3af;
transition: opacity 0.2s ease, transform 0.3s ease;
}
.hfx-card-notification-close {
display: grid;
place-items: center;
width: 1.8em;
height: 1.8em;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, #000 6%, transparent);
color: #4b5563;
cursor: pointer;
opacity: 0;
transform: scale(0.5) rotate(-90deg);
transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}
.hfx-card-notification-close svg {
width: 0.9em;
height: 0.9em;
}
.hfx-card-notification:is(:hover, :focus-within) .hfx-card-notification-time {
opacity: 0;
transform: scale(0.6);
}
.hfx-card-notification:is(:hover, :focus-within) .hfx-card-notification-close {
opacity: 1;
transform: none;
}
.hfx-card-notification-close:hover { background: color-mix(in srgb, #000 12%, transparent); }
@keyframes hfx-card-notification-ring {
0%, 100% { transform: none; }
12% { transform: rotate(22deg); }
26% { transform: rotate(-18deg); }
40% { transform: rotate(13deg); }
54% { transform: rotate(-8deg); }
68% { transform: rotate(4deg); }
82% { transform: rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-notification, .hfx-card-notification *, .hfx-card-notification::before, .hfx-card-notification::after, .hfx-card-notification *::before, .hfx-card-notification *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. 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.