├── index.html
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Text Intro Animation | Codegrid
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
less is more
15 |
less is more
16 |
less is more
17 |
less is more
18 |
less is more
19 |
less is more
20 |
less is more
21 |
less is more
22 |
less is more
23 |
less is more
24 |
less is more
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | width: 100%;
6 | height: 100vh;
7 | }
8 |
9 | .header {
10 | position: absolute;
11 | top: 50%;
12 | left: 50%;
13 | transform: translate(-50%, -50%);
14 | font-family: "Monument Extended";
15 | text-transform: uppercase;
16 | font-size: 100px;
17 | z-index: -1;
18 | }
19 |
20 | .container {
21 | width: 100%;
22 | height: 100vh;
23 | margin: 0px auto;
24 | display: flex;
25 | justify-content: center;
26 | align-items: center;
27 | background: #161616;
28 | animation: slide-out-container 4s cubic-bezier(0.97, 0.01, 0.36, 0.99) 2.8s;
29 | animation-fill-mode: forwards;
30 | }
31 |
32 | .text-wrapper {
33 | color: white;
34 | position: absolute;
35 | }
36 |
37 | .text {
38 | font-family: "Monument Extended";
39 | font-weight: lighter;
40 | font-size: 54px;
41 | }
42 |
43 | .text-1,
44 | .text-3,
45 | .text-4,
46 | .text-8,
47 | .text-9,
48 | .text-11 {
49 | color: rgba(0, 0, 0, 0);
50 | -webkit-text-stroke: 1px white;
51 | }
52 |
53 | @keyframes blink {
54 | 0% {
55 | opacity: 0%;
56 | }
57 | 1% {
58 | opacity: 100%;
59 | }
60 | 99% {
61 | opacity: 100%;
62 | }
63 | 100% {
64 | opacity: 0;
65 | }
66 | }
67 |
68 | .text-1 {
69 | animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s;
70 | opacity: 0;
71 | }
72 |
73 | .text-2 {
74 | animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s;
75 | opacity: 0;
76 | }
77 |
78 | .text-3 {
79 | animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s;
80 | opacity: 0;
81 | }
82 |
83 | .text-4 {
84 | animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s;
85 | opacity: 0;
86 | }
87 |
88 | .text-5 {
89 | animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s;
90 | opacity: 0;
91 | }
92 |
93 | .text-6 {
94 | animation: blink 0.8s linear 0.4s, blink 0.8s linear 2.5s, slide-out 1s linear 3.2s;
95 | opacity: 0;
96 | }
97 |
98 | .text-7 {
99 | animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s;
100 | opacity: 0;
101 | }
102 |
103 | .text-8 {
104 | animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s;
105 | opacity: 0;
106 | }
107 |
108 | .text-9 {
109 | animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s;
110 | opacity: 0;
111 | }
112 |
113 | .text-10 {
114 | animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s;
115 | opacity: 0;
116 | }
117 |
118 | .text-11 {
119 | animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s;
120 | opacity: 0;
121 | }
122 |
123 | @keyframes slide-out {
124 | 0% {
125 | opacity: 0%;
126 | }
127 | 1% {
128 | opacity: 100%;
129 | }
130 |
131 | 19% {
132 | opacity: 100%;
133 | }
134 | 20% {
135 | opacity: 0%;
136 | }
137 |
138 | 39% {
139 | opacity: 0%;
140 | }
141 | 40% {
142 | opacity: 100%;
143 | }
144 |
145 | 59% {
146 | opacity: 100%;
147 | }
148 | 60% {
149 | opacity: 0%;
150 | }
151 |
152 | 79% {
153 | opacity: 0%;
154 | }
155 | 80% {
156 | opacity: 100%;
157 | }
158 |
159 | 100% {
160 | opacity: 100%;
161 | }
162 | }
163 |
164 | @keyframes slide-out-container {
165 | 0% {
166 | height: 100vh;
167 | }
168 |
169 | 40% {
170 | height: 100vh;
171 | }
172 |
173 | 100% {
174 | height: 0%;
175 | }
176 | }
177 |
178 | @media (max-width: 990px) {
179 | .header {
180 | font-size: 24px;
181 | }
182 |
183 | .text {
184 | font-size: 24px;
185 | }
186 | }
187 |
--------------------------------------------------------------------------------