Text Animation

Open In Editor Publish Your Code

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;
  }
}

Text Animation

Recommended

CSS Loading Animation HTML Snippet

CSS Animation Layers: Coding, Debugging, Fragments

CSS Code Animation: Sand, Errors, and Development

HTML

CSS

JS

Recommended

CSS Loading Animation HTML Snippet

CSS Animation Layers: Coding, Debugging, Fragments

CSS Code Animation: Sand, Errors, and Development

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS