Анимация текста средствами CSS

Качающийся текст средствами CSS

Код
<p>CALCSBOX.COM</p>
body,
html {
	height: 100%;
}

body {
	position: relative;
	display: grid;
	overflow: hidden;
	grid-template: "body";
	place-content: center;
	place-items: center;
	margin: 0;
	background-color: #ffdd40;
}

body > *,
body::before {
	grid-area: body;
}

body::before {
	content: '';
	width: 150vmax;
	height: 150vmax;
	opacity: 0.4;
	background: repeating-conic-gradient(from 0deg, white 0deg 15deg, transparent 15deg 30deg);
	-webkit-mask-image: radial-gradient(hsla(0 0% 0% / 1), hsla(0 0% 0% / 0) 50%);
	animation: rotate 20s linear infinite;
}

body::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: calc(50vh + 1em);
	background-color: inherit;
}

p {
	--duration: 1200ms;
	--text-shadow-color: hsl(0 0% 100%);
	
	position: relative;
	display: inline-block;
	z-index: 1;
	font-family: "Londrina Solid", sans-serif;
	font-size: min(10vw, 10rem);
	text-transform: uppercase;
	text-shadow: 
		0.006em -0.006em 0 var(--text-shadow-color),
		0.012em -0.012em 0 var(--text-shadow-color),
		0.018em -0.018em 0 var(--text-shadow-color),
		0.024em -0.024em 0 var(--text-shadow-color),
		0.030em -0.030em 0 var(--text-shadow-color),
		0.006em  0       0 currentcolor,
		0.012em -0.006em 0 currentcolor,
		0.018em -0.012em 0 currentcolor,
		0.024em -0.018em 0 currentcolor,
		0.030em -0.024em 0 currentcolor,
		0.036em -0.030em 0 currentcolor,
		0.036em -0.036em 0 currentcolor;
	perspective: 3em;
	transform-origin: bottom center;
	transform-style: preserve-3d;
	animation: movement var(--duration) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

p::after {
	--transform: scaleY(-1) translateY(-30%) rotateX(-35deg) scaleY(1.2) translateY(calc(-30% + 2px));
	--transform-alt: scaleY(-1) translateY(-30%) rotateX(-55deg) scaleY(1.4) translateY(calc(-30% + 2px));
	
	content: 'CALCSBOX.COM' / '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	text-shadow: initial;
	-webkit-mask-image:
		linear-gradient(
			to bottom,
			hsla(0 0% 0% / 0) 0%,
			hsla(0 0% 0% / 0.006) 13.7%,
			hsla(0 0% 0% / 0.022) 25.4%,
			hsla(0 0% 0% / 0.049) 35.3%,
			hsla(0 0% 0% / 0.086) 43.6%,
			hsla(0 0% 0% / 0.133) 50.6%,
			hsla(0 0% 0% / 0.188) 56.5%,
			hsla(0 0% 0% / 0.251) 61.6%,
			hsla(0 0% 0% / 0.323) 66%,
			hsla(0 0% 0% / 0.402) 70.1%,
			hsla(0 0% 0% / 0.487) 74.1%,
			hsla(0 0% 0% / 0.579) 78.1%,
			hsla(0 0% 0% / 0.677) 82.5%,
			hsla(0 0% 0% / 0.780) 87.4%,
			hsla(0 0% 0% / 0.888) 93.2%,
			hsla(0 0% 0% / 1) 100%
		);
	opacity: 0.8;
	transform: var(--transform);
	animation: shadow var(--duration) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes movement {
	20% { transform: scaleY(1.4) skew(10deg)  }
	50% { transform: scaleY(1)   skew(0)      }
	70% { transform: scaleY(1.4) skew(-10deg) }
}

@keyframes shadow {
	20% { transform: var(--transform-alt) }
	50% { transform: var(--transform)     }
	70% { transform: var(--transform-alt) }
}

@keyframes rotate {
	to { transform: rotate(1turn) }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
	}
}
Результат

100 лет

Код
<main>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</main>
@import url("https://fonts.googleapis.com/css?family=Shrikhand&display=swap");
:root {
  --color1: #E71D36;
  --color2: #FF9F1C;
  --dur: 6s;
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --size: 75px;
}
@media (min-width: 700px) {
  :root {
    --size: 150px;
  }
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-content: center;
  overflow: hidden;
  height: 100vh;
  -webkit-animation: color-swap var(--dur) var(--ease) alternate infinite;
          animation: color-swap var(--dur) var(--ease) alternate infinite;
}
@-webkit-keyframes color-swap {
  0%, 20% {
    color: var(--color1);
    background-color: var(--color2);
  }
  80%, 100% {
    color: var(--color2);
    background-color: var(--color1);
  }
}
@keyframes color-swap {
  0%, 20% {
    color: var(--color1);
    background-color: var(--color2);
  }
  80%, 100% {
    color: var(--color2);
    background-color: var(--color1);
  }
}

main {
  display: flex;
  align-items: center;
  font-size: var(--size);
  font-family: "Shrikhand", sans-serif;
  -webkit-animation: zoom var(--dur) var(--ease) infinite;
          animation: zoom var(--dur) var(--ease) infinite;
}
main div {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
main div span {
  -webkit-animation-name: stretch, date-opacity;
          animation-name: stretch, date-opacity;
}

span {
  position: relative;
  display: flex;
  width: var(--size);
  height: var(--size);
  text-align: center;
  -webkit-animation: var(--dur) var(--ease) infinite;
          animation: var(--dur) var(--ease) infinite;
  -webkit-animation-name: stretch, numbers-opacity;
          animation-name: stretch, numbers-opacity;
}
span:before {
  content: "0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 ";
  -webkit-animation: var(--dur) var(--ease) alternate infinite;
          animation: var(--dur) var(--ease) alternate infinite;
}
span:nth-child(1):before {
  -webkit-animation-name: increment-1;
          animation-name: increment-1;
}
span:nth-child(2):before {
  -webkit-animation-name: increment-2;
          animation-name: increment-2;
}
span:nth-child(3):before {
  -webkit-animation-name: increment-3;
          animation-name: increment-3;
}
span:nth-child(4):before {
  -webkit-animation-name: increment-4;
          animation-name: increment-4;
}

@-webkit-keyframes increment-1 {
  0%, 20% {
    transform: translateY(calc(var(--size) * -11));
  }
  80%, 100% {
    transform: translateY(calc(var(--size) * -22));
  }
}

@keyframes increment-1 {
  0%, 20% {
    transform: translateY(calc(var(--size) * -11));
  }
  80%, 100% {
    transform: translateY(calc(var(--size) * -22));
  }
}
@-webkit-keyframes increment-2 {
  0%, 20% {
    transform: translateY(calc(var(--size) * -9));
  }
  80%, 100% {
    transform: translateY(calc(var(--size) * -40));
  }
}
@keyframes increment-2 {
  0%, 20% {
    transform: translateY(calc(var(--size) * -9));
  }
  80%, 100% {
    transform: translateY(calc(var(--size) * -40));
  }
}
@-webkit-keyframes increment-3 {
  0%, 20% {
    transform: translateY(calc(var(--size) * -12));
  }
  80%, 100% {
    transform: translateY(calc(var(--size) * -32));
  }
}
@keyframes increment-3 {
  0%, 20% {
    transform: translateY(calc(var(--size) * -12));
  }
  80%, 100% {
    transform: translateY(calc(var(--size) * -32));
  }
}
@-webkit-keyframes increment-4 {
  0%, 20% {
    transform: translateY(calc(var(--size) * -10));
  }
  80%, 100% {
    transform: translateY(calc(var(--size) * -50));
  }
}
@keyframes increment-4 {
  0%, 20% {
    transform: translateY(calc(var(--size) * -10));
  }
  80%, 100% {
    transform: translateY(calc(var(--size) * -50));
  }
}
@-webkit-keyframes numbers-opacity {
  0%, 10% {
    opacity: 0.125;
  }
  25%, 75% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0.125;
  }
}
@keyframes numbers-opacity {
  0%, 10% {
    opacity: 0.125;
  }
  25%, 75% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0.125;
  }
}
@-webkit-keyframes date-opacity {
  0%, 15% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}
@keyframes date-opacity {
  0%, 15% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes stretch {
  0%, 20% {
    transform: scaleY(1.001);
  }
  50% {
    transform: scaleY(2);
  }
  80%, 100% {
    transform: scaleY(1.001);
  }
}
@keyframes stretch {
  0%, 20% {
    transform: scaleY(1.001);
  }
  50% {
    transform: scaleY(2);
  }
  80%, 100% {
    transform: scaleY(1.001);
  }
}
@-webkit-keyframes zoom {
  0%, 15% {
    transform: scale(1.001);
  }
  25%, 75% {
    transform: scale(1.2);
  }
  85%, 100% {
    transform: scale(1.001);
  }
}
@keyframes zoom {
  0%, 15% {
    transform: scale(1.001);
  }
  25%, 75% {
    transform: scale(1.2);
  }
  85%, 100% {
    transform: scale(1.001);
  }
}
Результат

Пульсирующий текст

Код
<div class="area">⚠ achtung ⚠</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
 background: #111;
 font-family: "Open Sans",  Impact;
}

.area {
  text-align: center;
  font-size: 6.5em;
  color: #fff;
  letter-spacing: -7px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}




Результат

Проявление текста

Код
<h1 class="reveal-text">
	calcsbox.com
</h1>
:root {
	--delay: 0;
	--duration: 800ms;
	--iterations: 1;
}
/* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */

body{
  background:black;
}

.reveal-text,
.reveal-text::after {
	-webkit-animation-delay: var(--animation-delay, 2s);
	        animation-delay: var(--animation-delay, 2s);
	-webkit-animation-iteration-count: var(--iterations, 1);
	        animation-iteration-count: var(--iterations, 1);
	-webkit-animation-duration: var(--duration, 800ms);
	        animation-duration: var(--duration, 800ms);
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
	        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
	--animation-delay: var(--delay, 0);
	--animation-duration: var(--duration, 800ms);
	--animation-iterations: var(--iterations, 1);
	position: relative;
	font-size: 10vw;
	-webkit-animation-name: clip-text;
	        animation-name: clip-text;
	color: #FFF;
	white-space: nowrap;
	cursor: default
	
}

.reveal-text::after {
		content: "";
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #f2f98b;
		transform: scaleX(0);
		transform-origin: 0 50%;
		pointer-events: none;
		-webkit-animation-name: text-revealer;
		        animation-name: text-revealer;
	}


@-webkit-keyframes clip-text {
	from {
		-webkit-clip-path: inset(0 100% 0 0);
		        clip-path: inset(0 100% 0 0);
	}
	to {
		-webkit-clip-path: inset(0 0 0 0);
		        clip-path: inset(0 0 0 0);
	}
}


@keyframes clip-text {
	from {
		-webkit-clip-path: inset(0 100% 0 0);
		        clip-path: inset(0 100% 0 0);
	}
	to {
		-webkit-clip-path: inset(0 0 0 0);
		        clip-path: inset(0 0 0 0);
	}
}


@-webkit-keyframes text-revealer {
	
	0%, 50% {
		transform-origin: 0 50%;
	}
	
	60%, 100% {
		transform-origin: 100% 50%;		
	}

	
	60% {
		transform: scaleX(1);
	}
	
	100% {
		transform: scaleX(0);
	}
}


@keyframes text-revealer {
	
	0%, 50% {
		transform-origin: 0 50%;
	}
	
	60%, 100% {
		transform-origin: 100% 50%;		
	}

	
	60% {
		transform: scaleX(1);
	}
	
	100% {
		transform: scaleX(0);
	}
}
Результат

Тени от прожекторов

Код
<div class="css">
  <span>C</span>
  <span>S</span>
  <span>S</span>
</div>
@import url("https://fonts.googleapis.com/css2?family=Gluten:wght@700&display=swap");

html,
body {
  height: 100%;
}

body {
  --color-dark: 210 55% 8%;
  --color-dark-static: 210 55% 25%;
  --color-light: 200 60% 90%;
  --font-size: min(20vw + 1rem, 12rem);

  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: hsl(var(--color-dark));
  font-size: var(--font-size);
  font-family: "Gluten", sans-serif;
  perspective: 40em;
}

.css {
  --rotate: 70deg;
  --transition: 400ms cubic-bezier(0.25, 1, 0.5, 1);

  display: flex;
  position: relative;
  top: 0.25em;
  color: hsl(var(--color-dark-accent));
  user-select: none;
  perspective: 2em;
  transform: scale(0.9);
  transform-style: preserve-3d;
  transition: var(--transition);
  transition-property: perspective, transform;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>*</text></svg>")
      16 0,
    auto;
}

.css::before,
.css::after {
  --s: calc(var(--font-size) * 2);

  content: "";
  position: absolute;
  left: 50%;
  width: var(--s);
  height: calc(var(--s) / 2);
  background-color: hsl(var(--color-light));
  opacity: 0;
  transform: translateZ(-1vmin) translateX(-50%) scale(0);
  transition: var(--transition);
  transition-property: opacity, transform;
  pointer-events: none;
}

.css::before {
  bottom: 50%;
  border-top-left-radius: 360px;
  border-top-right-radius: 360px;
  transform-origin: bottom center;
}

.css::after {
  --s: calc(var(--font-size) * 2);

  top: 50%;
  transform-origin: top center;
  transform: translateX(-50%) rotateX(var(--rotate)) scale(0.001);
  background: linear-gradient(
    to bottom,
    hsl(var(--color-light)) 0%,
    hsla(var(--color-light) / 0.951) 6.3%,
    hsla(var(--color-light) / 0.888) 12.1%,
    hsla(var(--color-light) / 0.815) 17.6%,
    hsla(var(--color-light) / 0.734) 22.8%,
    hsla(var(--color-light) / 0.647) 27.9%,
    hsla(var(--color-light) / 0.557) 33%,
    hsla(var(--color-light) / 0.466) 38.3%,
    hsla(var(--color-light) / 0.377) 43.8%,
    hsla(var(--color-light) / 0.292) 49.7%,
    hsla(var(--color-light) / 0.213) 56.1%,
    hsla(var(--color-light) / 0.143) 63.1%,
    hsla(var(--color-light) / 0.084) 70.9%,
    hsla(var(--color-light) / 0.039) 79.5%,
    hsla(var(--color-light) / 0.01) 89.2%,
    hsla(var(--color-light) / 0) 100%
  );
}

.css span {
  --rotate-letter: 34deg;

  display: flex;
  flex-direction: column;
  line-height: 0.475;
  color: hsl(var(--color-dark-static));
  perspective: 1em;
  transition: var(--transition);
  transition-property: color, transform;
  transform-style: preserve-3d;
}

.css span::after {
  display: block;
  color: hsl(var(--color-dark));
  transform-origin: top center;
  transform: rotateX(var(--rotate)) scaleY(1.25);
  pointer-events: none;
  z-index: -1;
}

.css :first-child::after {
  content: "c";
}

.css :not(:first-child)::after {
  content: "s";
}

.css :first-child {
  transform-origin: left center;
}

.css :last-child {
  transform-origin: right center;
}

/* Hover */
.css:hover {
  transform: scale(1.25);
}

.css:hover::before {
  opacity: 1;
  transform: translateZ(-1vmin) translateX(-50%) scale(1.05);
}

.css:hover::after {
  opacity: 1;
  transform: translateZ(-1vmin) translateX(-50%) rotateX(var(--rotate))
    scale(1.05);
}

.css:hover span {
  color: hsl(var(--color-dark));
  transform: translateZ(6vmin);
}

.css:hover :first-child {
  transform: translateX(20%) rotateY(calc(var(--rotate-letter) * -1));
}

.css:hover :last-child {
  transform: translateX(-20%) rotateY(var(--rotate-letter));
}
Результат

Тень в стиле радуги

Код
<h1>CALCSBOX.COM</h1>
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

body {
  --bg: #000000;
  box-sizing: border-box;
  // min-height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: var(--bg);
}

h1 {
  --text: #ffffff;
  --red: #d12229;
  --orange: #f68a1e;
  --yellow: #fde01a;
  --green: #007940;
  --blue: #24408e;
  --purple: #732982;
  --font: "Lobster";
  color: var(--text);
  font-size: 5rem;
  font-family: var(--font);
  font-weight: 900;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  text-shadow: 10px 10px 2px var(--red), 15px 15px 2px var(--orange), 20px 20px 2px var(--yellow), 25px 25px 2px var(--green), 30px 30px 2px var(--blue), 35px 35px 2px var(--purple);
}
Результат

Космический неон

Код
<div class="neon-effect">
	<h1 class="neon-title" data-text="Kosmic">Kosmic</h1>
	<div class="neon-gradient"></div>
	<div class="neon-light"></div>
</div>
:root {
  --primary: #e32833;
  --secondary: #ff0c87;
}

body {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.neon-effect {
  font-weight: 700;
  font-size: 4rem;
  font-family: Montserrat;
  overflow: hidden;
}
.neon-title {
  position: relative;
  font-size: 5rem;
}
.neon-title::before, .neon-title::after {
  content: attr(data-text);
  color: white;
  filter: blur(0.02em);
  position: absolute;
  top: 0;
  left: 0;
}
.neon-title::after {
  mix-blend-mode: difference;
}
.neon-gradient, .neon-light {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.neon-gradient {
  background: linear-gradient(78deg, var(--primary), var(--secondary));
  mix-blend-mode: multiply;
}
.neon-light {
  -webkit-animation: light 5s infinite linear;
          animation: light 5s infinite linear;
  background: radial-gradient(circle, white, transparent 25%) 0 0/25% 25%, radial-gradient(circle, white, black 25%) 50% 50%/12.5% 12.5%;
  left: -100%;
  mix-blend-mode: color-dodge;
}

@-webkit-keyframes light {
  100% {
    transform: translate3d(50%, 50%, 0);
  }
}

@keyframes light {
  100% {
    transform: translate3d(50%, 50%, 0);
  }
}
Результат

Анимированная заливка текста текстом svg

Код
<svg viewBox="0 0 600 300">
  <!-- Symbol-->
  <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy=".35em">Interstellar</text>
  </symbol>
  <!-- Duplicate symbols-->
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
  <use class="text" xlink:href="#s-text"></use>
</svg>
/* Main styles */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.text {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}
.text:nth-child(5n+1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.text:nth-child(5n+2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}
.text:nth-child(5n+3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}
.text:nth-child(5n+4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}
.text:nth-child(5n+5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
/* Other styles */
html, body {
  height: 100%;
}

body {
  background: #111;
  background-size: 0.2em 100%;
  font: 5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
Результат

Текстовая анимация

Код
<svg viewBox="0 0 960 300">
	<symbol id="s-text">
		<text text-anchor="middle" x="50%" y="80%">Montserrat</text>
	</symbol>

	<g class = "g-ants">
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
	</g>
</svg>
@import url(https://fonts.googleapis.com/css?family=Montserrat);

html,
body {
  height: 100%;
  font-weight: 800;
}

body {
  background: #030321;
  font-family: Arial;
}

svg {
  display: block;
  font: 10.5em "Montserrat";
  width: 960px;
  height: 300px;
  margin: 0 auto;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 6% 29%;
  stroke-width: 5px;
  stroke-dashoffset: 0%;
  animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1) {
  stroke: #4d163d;
  animation-delay: -1;
}

.text-copy:nth-child(2) {
  stroke: #840037;
  animation-delay: -2s;
}

.text-copy:nth-child(3) {
  stroke: #bd0034;
  animation-delay: -3s;
}

.text-copy:nth-child(4) {
  stroke: #bd0034;
  animation-delay: -4s;
}

.text-copy:nth-child(5) {
  stroke: #fdb731;
  animation-delay: -5s;
}

@keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}
Результат
Текст средствами CSS CSS 85
Поделитесь с другими:

Если материал понравился Вам и оказался для Вас полезным, поделитесь им со своими друзьями!