1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6<title>Nachos Text Animation</title>
7<style>
8 :root{
9 --bg:#ffffff;
10 --black:#050816;
11 --blue:#2f86c7;
12 --red:#d24b3b;
13 --purple:#8a4cc2;
14 }
15
16 html,body{
17 margin:0;
18 width:100%;
19 height:100%;
20 background:var(--bg);
21 overflow:hidden;
22 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
23 }
24
25 .stage{
26 width:100%;
27 height:100%;
28 display:grid;
29 place-items:center;
30 }
31
32 .line{
33 font-size:3.8vw;
34 line-height:1;
35 font-weight:400;
36 color:var(--black);
37 white-space:nowrap;
38 transform: translateY(2vh);
39 }
40
41 .base{
42 color:var(--black);
43 }
44
45 .word-wrap{
46 display:inline-block;
47 position:relative;
48 vertical-align:baseline;
49 margin-left:.18em;
50 min-width:6.9ch;
51 height:1em;
52 }
53
54 .word{
55 position:absolute;
56 left:0;
57 top:0;
58 font-weight:600;
59 white-space:nowrap;
60 transform-origin:left center;
61 opacity:0;
62 }
63
64 .tasty{
65 color:var(--purple);
66 animation:tasty 8s linear infinite;
67 }
68
69 .wonderful{
70 color:var(--blue);
71 animation:wonderful 8s linear infinite;
72 }
73
74 .fancy{
75 color:var(--red);
76 animation:fancy 8s linear infinite;
77 }
78
79 @keyframes tasty{
80 0%, 12% { opacity:1; transform:translateX(0) scale(1); }
81 16%, 100% { opacity:0; transform:translateX(0) scale(1); }
82 }
83
84 @keyframes wonderful{
85 0%, 14% { opacity:0; transform:translateX(0) scale(1); }
86 18% { opacity:1; transform:translateX(0) scale(1); }
87 28% { opacity:1; transform:translateX(0) scale(1); }
88 34% { opacity:1; transform:translateX(0) scale(1); }
89 38% { opacity:1; transform:translateX(0) scale(1); }
90 42% { opacity:1; transform:translateX(0) scale(1); }
91 46% { opacity:1; transform:translateX(0) scale(1); }
92 50% { opacity:1; transform:translateX(0) scale(1); letter-spacing:0; }
93 54% { opacity:1; transform:translateX(0) scale(1); }
94 56% { opacity:1; transform:translateX(0) scale(1); }
95 58% { opacity:1; transform:translateX(0) scale(1); }
96 60% { opacity:1; transform:translateX(0) scale(1); }
97 62% { opacity:1; transform:translateX(0) scale(1); }
98 64% { opacity:1; transform:translateX(0) scale(1); }
99 66% { opacity:1; transform:translateX(0) scale(1); }
100 68% { opacity:0; transform:translateX(2.8ch) scale(1); }
101 100% { opacity:0; transform:translateX(2.8ch) scale(1); }
102 }
103
104 @keyframes fancy{
105 0%, 60% { opacity:0; transform:translateX(-.2ch) scale(1); }
106 64% { opacity:0; transform:translateX(-.2ch) scale(1); }
107 68% { opacity:1; transform:translateX(0) scale(1); }
108 100% { opacity:1; transform:translateX(0) scale(1); }
109 }
110
111 .period{
112 display:inline-block;
113 font-weight:600;
114 margin-left:0;
115 animation:periodColor 8s linear infinite;
116 }
117
118 @keyframes periodColor{
119 0%, 12% { color:var(--purple); opacity:1; }
120 16%, 60% { color:var(--blue); opacity:1; }
121 64%, 100% { color:var(--red); opacity:1; }
122 }
123
124 @media (max-width: 900px){
125 .line{ font-size:5.8vw; }
126 }
127</style>
128</head>
129<body>
130 <div class="stage">
131 <div class="line" aria-label="Nachos are tasty. Then wonderful. Then fancy.">
132 <span class="base">Nachos are</span>
133 <span class="word-wrap">
134 <span class="word tasty">tasty</span>
135 <span class="word wonderful">wonderful</span>
136 <span class="word fancy">fancy</span>
137 </span><span class="period">.</span>
138 </div>
139 </div>
140</body>
141</html>