AI CSS Animations

Anagram Text Animation

The letters of STALE hop over and under each other to spell LEAST, SLATE, TALES and back, glowing in your accent while they travel. Fixed-width slots make every destination a multiple of one cell.

Also known as: anagram animation css, letters rearrange animation, shuffle letters text.

HTML

<div class="txt-anagram-text" aria-label="Stale, least, slate, tales"><span aria-hidden="true"><span class="txt-anagram-text-s">S</span><span class="txt-anagram-text-t">T</span><span class="txt-anagram-text-a">A</span><span class="txt-anagram-text-l">L</span><span class="txt-anagram-text-e">E</span></span></div>

CSS

.txt-anagram-text {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 2.2);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  display: inline-block;
  padding: 0.35em 0;}
.txt-anagram-text > span {
  position: relative;
  display: block;
  width: 3.5em;
  height: 1.2em;
}
.txt-anagram-text > span > span {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.7em;
  text-align: center;
}
.txt-anagram-text .txt-anagram-text-s { animation: txt-anagram-text-s 6.4s infinite; }
.txt-anagram-text .txt-anagram-text-t { animation: txt-anagram-text-t 6.4s infinite; }
.txt-anagram-text .txt-anagram-text-a { animation: txt-anagram-text-a 6.4s infinite; }
.txt-anagram-text .txt-anagram-text-l { animation: txt-anagram-text-l 6.4s infinite; }
.txt-anagram-text .txt-anagram-text-e { animation: txt-anagram-text-e 6.4s infinite; }
@keyframes txt-anagram-text-s {
  0% { translate: 0em 0; transform: none; color: currentColor; }
  13% { translate: 0em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  19% { transform: translateY(-0.49em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  25% { translate: 2.1em 0; transform: none; color: currentColor; }
  38% { translate: 2.1em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  44% { transform: translateY(0.49em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  50% { translate: 0em 0; transform: none; color: currentColor; }
  63% { translate: 0em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  69% { transform: translateY(-0.58em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  75% { translate: 2.8em 0; transform: none; color: currentColor; }
  88% { translate: 2.8em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94% { transform: translateY(0.58em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { translate: 0em 0; transform: none; color: currentColor; }
}
@keyframes txt-anagram-text-t {
  0% { translate: 0.7em 0; transform: none; color: currentColor; }
  13% { translate: 0.7em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  19% { transform: translateY(-0.49em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  25% { translate: 2.8em 0; transform: none; color: currentColor; }
  38% { translate: 2.8em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  44% { transform: translateY(0.31em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  50% { translate: 2.1em 0; transform: none; color: currentColor; }
  63% { translate: 2.1em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  69% { transform: translateY(0.49em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  75% { translate: 0em 0; transform: none; color: currentColor; }
  88% { translate: 0em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94% { transform: translateY(-0.31em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { translate: 0.7em 0; transform: none; color: currentColor; }
}
@keyframes txt-anagram-text-a {
  0% { translate: 1.4em 0; transform: none; color: currentColor; }
  13% { translate: 1.4em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  25% { translate: 1.4em 0; transform: none; color: currentColor; }
  38% { translate: 1.4em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  50% { translate: 1.4em 0; transform: none; color: currentColor; }
  63% { translate: 1.4em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  69% { transform: translateY(0.31em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  75% { translate: 0.7em 0; transform: none; color: currentColor; }
  88% { translate: 0.7em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94% { transform: translateY(-0.31em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { translate: 1.4em 0; transform: none; color: currentColor; }
}
@keyframes txt-anagram-text-l {
  0% { translate: 2.1em 0; transform: none; color: currentColor; }
  13% { translate: 2.1em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  19% { transform: translateY(0.49em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  25% { translate: 0em 0; transform: none; color: currentColor; }
  38% { translate: 0em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  44% { transform: translateY(-0.31em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  50% { translate: 0.7em 0; transform: none; color: currentColor; }
  63% { translate: 0.7em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  69% { transform: translateY(-0.31em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  75% { translate: 1.4em 0; transform: none; color: currentColor; }
  88% { translate: 1.4em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94% { transform: translateY(-0.31em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { translate: 2.1em 0; transform: none; color: currentColor; }
}
@keyframes txt-anagram-text-e {
  0% { translate: 2.8em 0; transform: none; color: currentColor; }
  13% { translate: 2.8em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  19% { transform: translateY(0.49em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  25% { translate: 0.7em 0; transform: none; color: currentColor; }
  38% { translate: 0.7em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  44% { transform: translateY(-0.49em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  50% { translate: 2.8em 0; transform: none; color: currentColor; }
  63% { translate: 2.8em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  69% { transform: translateY(0.31em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  75% { translate: 2.1em 0; transform: none; color: currentColor; }
  88% { translate: 2.1em 0; transform: none; color: currentColor; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94% { transform: translateY(-0.31em) scale(1.06); color: var(--c); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { translate: 2.8em 0; transform: none; color: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .txt-anagram-text .txt-anagram-text-s { animation: none; translate: 0em 0; }
  .txt-anagram-text .txt-anagram-text-t { animation: none; translate: 0.7em 0; }
  .txt-anagram-text .txt-anagram-text-a { animation: none; translate: 1.4em 0; }
  .txt-anagram-text .txt-anagram-text-l { animation: none; translate: 2.1em 0; }
  .txt-anagram-text .txt-anagram-text-e { animation: none; translate: 2.8em 0; }
}

@media (prefers-reduced-motion: reduce) {
  .txt-anagram-text, .txt-anagram-text *, .txt-anagram-text::before, .txt-anagram-text::after, .txt-anagram-text *::before, .txt-anagram-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.

Similar text animations

Letters Rise
Letters Pop In
Wave Text
Typewriter Effect for Any Font