Instant sync
Changes land on every device in under a second.
Bouncing Icon Card Hover
A feature card whose icon tile fills with the accent and does one squash-and-stretch hop. Each keyframe sets its own easing, so the jump slows at the top and lands with a squash.
Also known as: feature card hover effect, service card icon animation, icon bounce on hover.
HTML
<article class="hfx-card-icon-bounce"> <span class="hfx-card-icon-bounce-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2 4.5 13.5H11L10 22l8.5-11.5H12z"/></svg></span> <h3>Instant sync</h3> <p>Changes land on every device in under a second.</p> </article>
CSS
.hfx-card-icon-bounce {
--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;
box-sizing: border-box;
width: 13em;
padding: 1.2em 1.2em 1.25em;
transition: border-color 0.3s ease, box-shadow 0.35s ease;}
.hfx-card-icon-bounce:hover {
border-color: color-mix(in srgb, var(--c) 40%, transparent);
box-shadow: 0 0.8em 1.4em -0.9em color-mix(in srgb, var(--c) 60%, transparent);
}
.hfx-card-icon-bounce-icon {
display: grid;
place-items: center;
width: 2.5em;
height: 2.5em;
margin-bottom: 0.8em;
border-radius: 0.7em;
background: color-mix(in srgb, var(--c) 12%, transparent);
color: var(--c);
transform-origin: 50% 100%;
transition: background-color 0.3s ease, color 0.3s ease;
}
.hfx-card-icon-bounce:hover .hfx-card-icon-bounce-icon {
background: var(--c);
color: #fff;
animation: hfx-card-icon-bounce-hop 0.8s both;
}
.hfx-card-icon-bounce-icon svg {
width: 1.25em;
height: 1.25em;
fill: currentColor;
}
.hfx-card-icon-bounce h3 {
font-weight: 600;
margin: 0 0 0.25em;
font-size: 1em;
}
.hfx-card-icon-bounce p {
margin: 0;
font-size: 0.8em;
line-height: 1.45;
color: #6b7280;
}
@keyframes hfx-card-icon-bounce-hop {
0% { transform: none; animation-timing-function: ease-out; }
14% { transform: scale(1.18, 0.8); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
42% { transform: translateY(-0.75em) scale(0.9, 1.1); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
62% { transform: scale(1.14, 0.84); animation-timing-function: ease-out; }
80% { transform: translateY(-0.12em) scale(0.97, 1.03); animation-timing-function: ease-in-out; }
100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-icon-bounce, .hfx-card-icon-bounce *, .hfx-card-icon-bounce::before, .hfx-card-icon-bounce::after, .hfx-card-icon-bounce *::before, .hfx-card-icon-bounce *::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.