Speed Slide In Text Effect
The text rushes in from the left leaning forward, trailing faint copies of itself, then brakes past its spot and rocks back upright. The trail is three text-shadows that collapse to zero.
Also known as: slide in text animation css, skew slide in, motion trail text.
HTML
<div class="txt-speed-slide-in-text">Full speed</div>
CSS
.txt-speed-slide-in-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;
color: var(--c);
font-style: italic;
animation: txt-speed-slide-in-text-dash 1s both;}
@keyframes txt-speed-slide-in-text-dash {
0% {
opacity: 0;
transform: translateX(-3em) skewX(-24deg);
text-shadow: -0.3em 0 color-mix(in srgb, var(--c) 50%, transparent), -0.6em 0 color-mix(in srgb, var(--c) 28%, transparent), -0.9em 0 color-mix(in srgb, var(--c) 12%, transparent);
animation-timing-function: cubic-bezier(0.3, 0.5, 0.35, 1);
}
8% { opacity: 1; }
55% {
transform: translateX(0.15em) skewX(10deg);
text-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent;
animation-timing-function: ease-in-out;
}
76% { transform: translateX(-0.04em) skewX(-3deg); }
100% { opacity: 1; transform: translateX(0) skewX(0); text-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
.txt-speed-slide-in-text, .txt-speed-slide-in-text *, .txt-speed-slide-in-text::before, .txt-speed-slide-in-text::after, .txt-speed-slide-in-text *::before, .txt-speed-slide-in-text *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - 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.