Text Animation – 9 CSS Text Effects (Typing, Glitch, Neon)

76 0 Text Effects codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Text Animation – 9 CSS Text Effects (Typing, Glitch, Neon)

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0c0d1a; color: #fff; font-family: "Segoe UI", system-ui, sans-serif; }
main { max-width: 900px; margin: 0 auto; padding: 40px 20px; display: grid; gap: 18px; }
section { background: #15172b; border-radius: 18px; padding: 34px 24px; text-align: center; overflow: hidden; }
small { display: block; opacity: .45; margin-bottom: 14px; letter-spacing: 2px; text-transform: uppercase; font-size: .72rem; }
h2 { font-size: clamp(2rem, 7vw, 3.8rem); font-weight: 900; line-height: 1.15; }
.type::after { content: "|"; color: #4cc9f0; animation: blink .8s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; }
.glitch::before { color: #0ff; animation: g1 2s infinite linear alternate-reverse; clip-path: inset(0 0 60% 0); left: 2px; }
.glitch::after { color: #f0f; animation: g2 1.5s infinite linear alternate-reverse; clip-path: inset(55% 0 0 0); left: -2px; }
@keyframes g1 { 0% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, 0); } 25% { clip-path: inset(40% 0 30% 0); transform: translate(3px, -1px); } 50% { clip-path: inset(80% 0 5% 0); } 75% { clip-path: inset(20% 0 55% 0); transform: translate(-2px, 1px); } 100% { clip-path: inset(60% 0 20% 0); transform: translate(2px, 0); } }
@keyframes g2 { 0% { clip-path: inset(70% 0 10% 0); transform: translate(3px, 0); } 33% { clip-path: inset(5% 0 80% 0); transform: translate(-3px, 1px); } 66% { clip-path: inset(45% 0 35% 0); } 100% { clip-path: inset(25% 0 60% 0); transform: translate(-1px, -1px); } }
.neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 15px #ff2a6d, 0 0 30px #ff2a6d, 0 0 60px #ff2a6d; animation: flick 3s infinite; }
@keyframes flick { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .35; text-shadow: none; } }
.split span { display: inline-block; white-space: pre; }
.wave span { animation: wave 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * .08s); color: hsl(calc(var(--i) * 25 + 180), 90%, 65%); }
@keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.grad { background: linear-gradient(90deg, #ff512f, #f09819, #4cc9f0, #a855f7, #ff512f); background-size: 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 5s linear infinite; }
@keyframes flow { to { background-position: 300% 0; } }
.scramble { font-family: Consolas, monospace; color: #06d6a0; cursor: pointer; }
.reveal span { opacity: 0; transform: translateY(40px) rotate(10deg); filter: blur(6px); }
.reveal.go span { animation: rv .6s forwards; animation-delay: calc(var(--i) * .05s); }
@keyframes rv { to { opacity: 1; transform: none; filter: none; } }
.outline { position: relative; display: inline-block; color: transparent; -webkit-text-stroke: 2px #ffd166; }
.outline::after { content: attr(data-text); position: absolute; inset: 0; color: #ffd166; -webkit-text-stroke: 0; clip-path: inset(0 100% 0 0); animation: fill 3s ease-in-out infinite alternate; }
@keyframes fill { to { clip-path: inset(0 0 0 0); } }
.words { display: inline-grid; height: 1.15em; overflow: hidden; vertical-align: bottom; color: #4cc9f0; }
.words b { grid-area: 1 / 1; animation: words 8s infinite; opacity: 0; }
.words b:nth-child(2) { animation-delay: 2s; } .words b:nth-child(3) { animation-delay: 4s; } .words b:nth-child(4) { animation-delay: 6s; }
@keyframes words { 0% { opacity: 0; transform: translateY(100%); } 5%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-100%); } }

// Text animations: typing loop, letter splitting, scramble/decode and scroll reveal
var phrases = ['Hello, World!', 'I build websites.', 'Text Animation', 'Copy this code ✨'], pi = 0, ci = 0, del = false, el = document.getElementById('type');
(function typeLoop() {
  var w = phrases[pi]; el.textContent = w.slice(0, ci);
  if (!del && ci === w.length) { del = true; return setTimeout(typeLoop, 1300); }
  if (del && ci === 0) { del = false; pi = (pi + 1) % phrases.length; }
  ci += del ? -1 : 1; setTimeout(typeLoop, del ? 40 : 90);
})();
document.querySelectorAll('.split').forEach(function (h) {
  var t = h.textContent; h.textContent = '';
  Array.from(t).forEach(function (ch, i) { var s = document.createElement('span'); s.textContent = ch; s.style.setProperty('--i', i); h.appendChild(s); });
});
var scr = document.getElementById('scr'), target = 'ACCESS GRANTED', chars = '!<>-_\\/[]{}—=+*^?#01', busy = false;
function scramble(to) {
  if (busy) return; busy = true; var frame = 0, from = scr.textContent, len = Math.max(from.length, to.length);
  var iv = setInterval(function () {
    var out = ''; for (var i = 0; i < len; i++) out += frame > i * 2 + 6 ? (to[i] || '') : chars[Math.random() * chars.length | 0];
    scr.textContent = out; frame++;
    if (frame > len * 2 + 8) { clearInterval(iv); scr.textContent = to; busy = false; }
  }, 35);
}
scr.addEventListener('mouseenter', function () { scramble(scr.textContent === target ? 'Hover to decode' : target); });
scr.addEventListener('click', function () { scramble(scr.textContent === target ? 'Hover to decode' : target); });
var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) e.target.classList.add('go'); else e.target.classList.remove('go'); }); }, { threshold: .5 });
document.querySelectorAll('.reveal').forEach(function (r) { io.observe(r); });

Comments 0

…

Text Animation – 9 CSS Text Effects (Typing, Glitch, Neon)

Recommended

Comments 0