Dashed to Solid Border
Rounded dashes flow around the box, stretch until they join into one solid line, then break apart again. Both the dash length and the dash offset of an SVG stroke animate, on separate clocks.
Also known as: dash to solid animation css, animated dashed outline, stroke dasharray animation.
Connecting
HTML
<div class="bdr-dashed-to-solid-border"> <svg class="bdr-dashed-to-solid-border-svg" aria-hidden="true"><rect width="100%" height="100%" pathLength="100"/></svg> Connecting </div>
CSS
.bdr-dashed-to-solid-border {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 15em;
height: 8.5em;
border-radius: 1em;
font-family: system-ui, sans-serif;
font-weight: 600;
background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-dashed-to-solid-border-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.bdr-dashed-to-solid-border-svg rect {
rx: 1em;
fill: none;
stroke: var(--c);
stroke-width: 0.16em;
stroke-linecap: round;
stroke-dasharray: 0.5 3.5;
animation:
bdr-dashed-to-solid-border-join 4s cubic-bezier(0.65, 0, 0.35, 1) infinite,
bdr-dashed-to-solid-border-flow 1.6s linear infinite;
}
@keyframes bdr-dashed-to-solid-border-join {
0%, 12%, 100% { stroke-dasharray: 0.5 3.5; }
46%, 62% { stroke-dasharray: 4 0; }
}
@keyframes bdr-dashed-to-solid-border-flow {
to { stroke-dashoffset: -4; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-dashed-to-solid-border, .bdr-dashed-to-solid-border *, .bdr-dashed-to-solid-border::before, .bdr-dashed-to-solid-border::after, .bdr-dashed-to-solid-border *::before, .bdr-dashed-to-solid-border *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bdr-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--bdr-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.