Animación de texto CSS

Abrir en el editor Video Publica tu código

Recomendado

8 May 2025

html,
body {
  height: 100%;
  overflow: hidden;
  user-select: none;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(#000000, #000);
}
h1 {
  font: 300 80px/1 courier;
  white-space: nowrap;
  color: whitesmoke;
}
span {
  display: inline-block;
  animation: stretch 2.5s cubic-bezier(0.4, 1.4, 0.75, 0.9) infinite;
  transform-origin: center;
}
span:nth-of-type(1) {
  animation-delay: 0.25s;
}
span:nth-of-type(2) {
  animation-delay: 0.5s;
}
span:nth-of-type(3) {
  animation-delay: 0.75s;
}
span:nth-of-type(4) {
  animation-delay: 1s;
}
span:nth-of-type(5) {
  animation-delay: 1.25s;
}
span:nth-of-type(6) {
  animation-delay: 1.5s;
}
span:nth-of-type(7) {
  animation-delay: 1.75s;
}
span:nth-of-type(8) {
  animation-delay: 2s;
}
span:nth-of-type(9) {
  animation-delay: 2.25s;
}
span:nth-of-type(10) {
  animation-delay: 2.5s;
}
@keyframes stretch {
  5% {
    transform: scaleX(5000);
    opacity: 0.1;
  }
  15% {
    transform: scaleX(1);
    opacity: 1;
  }
}

Animación de texto CSS

Recomendado

botón de escaneo

Un código de ytr3d3

Un código de Metehan

HTML

CSS

JS

Recomendado

botón de escaneo

Un código de ytr3d3

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS