Selection Box Text Animation: CSS Text Animation

Selection Box Text Animation

A design tool selection clicks onto a headline: hairline frame, four handles, and a cursor that grabs a corner, scales it up and back, then lets go. One transform scales it all from the center.

Also known as: design tool selection animation, bounding box handles css, figma style text selection.

Headline

Color Font size 40px Dark background

HTML

<div class="txt-selection-box-text"><span class="txt-selection-box-text-frame">Headline<i aria-hidden="true"></i><i aria-hidden="true"></i><i aria-hidden="true"></i><i aria-hidden="true"></i><svg viewBox="0 0 20 24" aria-hidden="true"><path d="M2 2 L2 19 L6.5 15 L9.5 22 L12.5 20.5 L9.5 14 L16 14 Z" /></svg></span></div>

CSS

.txt-selection-box-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  white-space: nowrap;}
.txt-selection-box-text-frame {
  position: relative;
  display: inline-block;
  padding: 0.06em 0.18em;
  outline: 0.04em solid transparent;
  animation: txt-selection-box-text-frame 4.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* white squares with an accent edge, one per corner */
.txt-selection-box-text-frame i {
  position: absolute;
  box-sizing: border-box;
  width: 0.16em;
  height: 0.16em;
  /* negative margins center each handle on its corner */
  margin: -0.08em;
  border: 0.04em solid var(--c);
  background: #fff;
  transform: scale(0);
  animation: txt-selection-box-text-handle 4.4s ease infinite;
}
.txt-selection-box-text-frame i:nth-of-type(1) { top: 0; left: 0; }
.txt-selection-box-text-frame i:nth-of-type(2) { top: 0; right: 0; }
.txt-selection-box-text-frame i:nth-of-type(3) { bottom: 0; left: 0; }
.txt-selection-box-text-frame i:nth-of-type(4) { bottom: 0; right: 0; }
.txt-selection-box-text-frame svg {
  position: absolute;
  right: -0.42em;
  bottom: -0.62em;
  width: 0.5em;
  height: 0.6em;
  fill: currentColor;
  stroke: var(--c);
  stroke-width: 1.4;
  stroke-linejoin: round;
  opacity: 0;
  animation: txt-selection-box-text-cursor 4.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes txt-selection-box-text-frame {
  0%, 94%, 100% { outline-color: transparent; transform: none; }
  6%, 30%       { outline-color: var(--c); transform: none; }
  45%, 58%      { outline-color: var(--c); transform: scale(1.14); }
  72%, 86%      { outline-color: var(--c); transform: none; }
}
@keyframes txt-selection-box-text-handle {
  0%, 94%, 100% { transform: scale(0); }
  8%, 86%       { transform: scale(1); }
}
@keyframes txt-selection-box-text-cursor {
  0%, 12%   { opacity: 0; transform: translate(0.5em, 0.5em); }
  22%, 78%  { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: translate(0.5em, 0.5em); }
}

@media (prefers-reduced-motion: reduce) {
  .txt-selection-box-text, .txt-selection-box-text *, .txt-selection-box-text::before, .txt-selection-box-text::after, .txt-selection-box-text *::before, .txt-selection-box-text *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
Speed: change the duration on the transition or animation shorthand. 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.

Selection Box Text Animation

HTML

CSS

Customizing this snippet

Similar text animations