Rev 175 | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
| Rev 175 | Rev 184 | ||
|---|---|---|---|
| Line 13... | Line 13... | ||
| 13 | use de\pointedears\css\least\Mixins;
|
13 | use de\pointedears\css\least\Mixins;
|
| 14 | ?>@charset "UTF-8"; |
14 | ?>@charset "UTF-8"; |
| 15 | 15 | ||
| 16 | /* 0.0 to 1.0 s */
|
16 | /* 0.0 to 1.0 s */
|
| 17 | <?php |
17 | <?php |
| - | 18 | /* hide up to 0.25 s */
|
|
| 18 | Mixins::keyframes('fade-in', |
19 | Mixins::keyframes('fade-in', <<<CSS |
| 19 | 'from {
|
- | |
| 20 | opacity: 0;
|
- | |
| 21 | }
|
- | |
| 22 |
|
- | |
| 23 | /* at 0.25 s */
|
- | |
| 24 | 25% {
|
20 | from, 25% { |
| 25 | opacity: 0;
|
21 | opacity: 0; |
| 26 | }
|
22 | }
|
| 27 |
|
23 | |
| 28 | to {
|
24 | to {
|
| 29 | opacity: 1;
|
25 | opacity: 1; |
| 30 | }'); |
26 | }
|
| - | 27 | CSS |
|
| - | 28 | ); |
|
| 31 | ?>
|
29 | ?>
|
| 32 | 30 | ||
| 33 | body.fade-in { |
31 | body.fade-in { |
| 34 | /* TODO: Step-by-step display instead */
|
32 | /* TODO: Step-by-step display instead */
|
| 35 | /*-webkit-animation-name: fade-in;*/
|
33 | /*-webkit-animation-name: fade-in;*/
|
| 36 | /* -webkit-animation-iteration-count: infinite; */
|
34 | /* -webkit-animation-iteration-count: infinite; */
|
| 37 | }
|
35 | }
|
| 38 | 36 | ||
| 39 | /* 0.0 to 0.6 s */
|
37 | /* 0.0 to 0.6 s */
|
| 40 | <?php |
38 | <?php |
| - | 39 | /* up to shortly before 0.6 s */
|
|
| 41 | Mixins::keyframes('empty-content', |
40 | Mixins::keyframes('empty-content', <<<CSS |
| 42 | 'from {
|
41 | from, 99% { |
| 43 | opacity: 0;
|
42 | opacity: 0; |
| 44 | }
|
43 | }
|
| 45 |
|
44 | CSS |
| 46 | /* 0.6 s */
|
- | |
| 47 | 99% {
|
- | |
| 48 | opacity: 0;
|
- | |
| 49 | }'); |
45 | ); |
| 50 | ?>
|
46 | ?>
|
| 51 | 47 | ||
| 52 | .empty.fade-in #content { |
48 | .empty.fade-in #content { |
| 53 | <?php |
49 | <?php |
| 54 | Mixins::animation('-name', 'empty-content'); |
50 | Mixins::animation('-name', 'empty-content'); |
| Line 99... | Line 95... | ||
| 99 | ?>
|
95 | ?>
|
| 100 | }
|
96 | }
|
| 101 | 97 | ||
| 102 | /* 0.0 to 0.5 s */
|
98 | /* 0.0 to 0.5 s */
|
| 103 | <?php |
99 | <?php |
| - | 100 | /* up to shortly before 0.5 s */
|
|
| 104 | Mixins::keyframes('bow-top-text', |
101 | Mixins::keyframes('bow-top-text', <<<CSS |
| 105 | 'from {
|
102 | from, 99% { |
| 106 | opacity: 0;
|
103 | opacity: 0; |
| 107 | }
|
104 | }
|
| 108 |
|
105 | CSS |
| 109 | /* shortly before 1.0 s */
|
- | |
| 110 | 99% {
|
- | |
| 111 | opacity: 0;
|
- | |
| 112 | }'); |
106 | ); |
| 113 | ?>
|
107 | ?>
|
| 114 | 108 | ||
| 115 | .fade-in #bow-top .text { |
109 | .fade-in #bow-top .text { |
| 116 | <?php |
110 | <?php |
| 117 | Mixins::animation('-name', 'bow-top-text'); |
111 | Mixins::animation('-name', 'bow-top-text'); |
| Line 138... | Line 132... | ||
| 138 | ?>
|
132 | ?>
|
| 139 | }
|
133 | }
|
| 140 | 134 | ||
| 141 | /* 0.0 to 0.5 s */
|
135 | /* 0.0 to 0.5 s */
|
| 142 | <?php |
136 | <?php |
| - | 137 | /* up to shortly before 0.5 s */
|
|
| 143 | Mixins::keyframes('footer-text', |
138 | Mixins::keyframes('footer-text', <<<CSS |
| 144 | 'from {
|
139 | from, 99% { |
| 145 | opacity: 0;
|
140 | opacity: 0; |
| 146 | }
|
141 | }
|
| 147 |
|
142 | CSS |
| 148 | /* shortly before 0.5 s */
|
- | |
| 149 | 99% {
|
- | |
| 150 | opacity: 0;
|
- | |
| 151 | }'); |
143 | ); |
| 152 | ?>
|
144 | ?>
|
| 153 | 145 | ||
| 154 | .empty.fade-in #footer .text { |
146 | .empty.fade-in #footer .text { |
| 155 | <?php |
147 | <?php |
| 156 | Mixins::animation('-name', 'footer-text'); |
148 | Mixins::animation('-name', 'footer-text'); |
| Line 159... | Line 151... | ||
| 159 | ?>
|
151 | ?>
|
| 160 | }
|
152 | }
|
| 161 | 153 | ||
| 162 | /* 0.0 to 0.625s */
|
154 | /* 0.0 to 0.625s */
|
| 163 | <?php |
155 | <?php |
| - | 156 | /* up to 0.5s */
|
|
| 164 | Mixins::keyframes('bow-top-left', |
157 | Mixins::keyframes('bow-top-left', <<<CSS |
| 165 | 'from {
|
158 | from, 80% { |
| 166 | height: 0;
|
159 | height: 0; |
| 167 | }
|
160 | }
|
| 168 | 161 | CSS |
|
| 169 | /* at 0.5s */
|
- | |
| 170 | 80% {
|
- | |
| 171 | height: 0;
|
- | |
| 172 | }'); |
162 | ); |
| 173 | ?>
|
163 | ?>
|
| 174 | 164 | ||
| 175 | .fade-in #bow-top-left { |
165 | .fade-in #bow-top-left { |
| 176 | <?php |
166 | <?php |
| 177 | Mixins::animation('-name', 'bow-top-left'); |
167 | Mixins::animation('-name', 'bow-top-left'); |
| Line 180... | Line 170... | ||
| 180 | ?>
|
170 | ?>
|
| 181 | }
|
171 | }
|
| 182 | 172 | ||
| 183 | /* 0.0 to 0.63s */
|
173 | /* 0.0 to 0.63s */
|
| 184 | <?php |
174 | <?php |
| - | 175 | /* up to ca. 0.61875s */
|
|
| 185 | Mixins::keyframes('menu-container', <<<CSS |
176 | Mixins::keyframes('menu-container', <<<CSS |
| 186 | from {
|
177 | from, 98% { |
| 187 | opacity: 0; |
178 | opacity: 0; |
| 188 | }
|
179 | }
|
| 189 | - | ||
| 190 | /* at ca. 0.61875s */
|
- | |
| 191 | 98% { |
- | |
| 192 | opacity: 0; |
- | |
| 193 | }
|
- | |
| 194 | CSS |
180 | CSS |
| 195 | ); |
181 | ); |
| 196 | ?>
|
182 | ?>
|
| 197 | 183 | ||
| 198 | .fade-in .menu-container { |
184 | .fade-in .menu-container { |
| Line 203... | Line 189... | ||
| 203 | ?>
|
189 | ?>
|
| 204 | }
|
190 | }
|
| 205 | 191 | ||
| 206 | /* 0.0 to 0.63s */
|
192 | /* 0.0 to 0.63s */
|
| 207 | <?php |
193 | <?php |
| - | 194 | /* up to ca. 0.61875 s */
|
|
| 208 | Mixins::keyframes('menu', <<<CSS |
195 | Mixins::keyframes('menu', <<<CSS |
| 209 | from {
|
196 | from, 98% { |
| 210 | opacity: 0; |
- | |
| 211 | }
|
- | |
| 212 | - | ||
| 213 | /* at ca. 0.61875 s */
|
- | |
| 214 | 98% { |
- | |
| 215 | opacity: 0; |
197 | opacity: 0; |
| 216 | }
|
198 | }
|
| 217 | CSS |
199 | CSS |
| 218 | ); |
200 | ); |
| 219 | ?>
|
201 | ?>
|
| Line 253... | Line 235... | ||
| 253 | Mixins::animation('-duration', '0.75s'); |
235 | Mixins::animation('-duration', '0.75s'); |
| 254 | Mixins::animation('-timing-function', 'linear'); |
236 | Mixins::animation('-timing-function', 'linear'); |
| 255 | ?>
|
237 | ?>
|
| 256 | }
|
238 | }
|
| 257 | 239 | ||
| 258 | /* 0.0 to 0.875s */
|
240 | /* 0.0 to 0.75s */
|
| 259 | <?php |
241 | <?php |
| - | 242 | /* hide up to 0.7425 s */
|
|
| 260 | Mixins::keyframes('elbo-bg', <<<CSS |
243 | Mixins::keyframes('elbo-bg', <<<CSS |
| 261 | from, 99% { |
244 | from, 99% { |
| 262 | opacity: 0; |
245 | opacity: 0; |
| 263 | }
|
246 | }
|
| 264 | CSS |
247 | CSS |
| Line 273... | Line 256... | ||
| 273 | Mixins::animation('-duration', '0.75s'); |
256 | Mixins::animation('-duration', '0.75s'); |
| 274 | Mixins::animation('-timing-function', 'linear'); |
257 | Mixins::animation('-timing-function', 'linear'); |
| 275 | ?>
|
258 | ?>
|
| 276 | }
|
259 | }
|
| 277 | 260 | ||
| 278 | /* 0.0 to 0.875 */
|
261 | /* 0.0 to 0.875 s */
|
| 279 | <?php |
262 | <?php |
| - | 263 | /* hide up to 0.86625 s */
|
|
| 280 | Mixins::keyframes('elbo', <<<CSS |
264 | Mixins::keyframes('elbo', <<<CSS |
| 281 | from {
|
265 | from, 99% { |
| 282 | opacity: 0; |
- | |
| 283 | }
|
- | |
| 284 | - | ||
| 285 | 99% { |
- | |
| 286 | opacity: 0; |
266 | opacity: 0; |
| 287 | }
|
267 | }
|
| 288 | CSS |
268 | CSS |
| 289 | ); |
269 | ); |
| 290 | ?>
|
270 | ?>
|
| Line 297... | Line 277... | ||
| 297 | ?>
|
277 | ?>
|
| 298 | }
|
278 | }
|
| 299 | 279 | ||
| 300 | /* 0.0 to 1s */
|
280 | /* 0.0 to 1s */
|
| 301 | <?php |
281 | <?php |
| - | 282 | /* up to 0.99 s */
|
|
| 302 | Mixins::keyframes('elbo-border', <<<CSS |
283 | Mixins::keyframes('elbo-border', <<<CSS |
| 303 | from {
|
284 | from, 99% { |
| 304 | opacity: 0; |
- | |
| 305 | }
|
- | |
| 306 | - | ||
| 307 | /* 0.99 s */
|
- | |
| 308 | 99% { |
- | |
| 309 | opacity: 0; |
285 | opacity: 0; |
| 310 | }
|
286 | }
|
| 311 | CSS |
287 | CSS |
| 312 | ); |
288 | ); |
| 313 | ?>
|
289 | ?>
|
| Line 321... | Line 297... | ||
| 321 | ?>
|
297 | ?>
|
| 322 | }
|
298 | }
|
| 323 | 299 | ||
| 324 | /* 0.0 to 1.125s */
|
300 | /* 0.0 to 1.125s */
|
| 325 | <?php |
301 | <?php |
| - | 302 | /* hide up to 1.11375 s */
|
|
| 326 | Mixins::keyframes('content', <<<CSS |
303 | Mixins::keyframes('content', <<<CSS |
| 327 | from {
|
304 | from, 99% { |
| 328 | opacity: 0; |
- | |
| 329 | }
|
- | |
| 330 | - | ||
| 331 | 99% { |
- | |
| 332 | opacity: 0; |
305 | opacity: 0; |
| 333 | }
|
306 | }
|
| 334 | CSS |
307 | CSS |
| 335 | ); |
308 | ); |
| 336 | ?>
|
309 | ?>
|
| Line 342... | Line 315... | ||
| 342 | <?php |
315 | <?php |
| 343 | Mixins::animation('-name', 'content'); |
316 | Mixins::animation('-name', 'content'); |
| 344 | Mixins::animation('-duration', '1.125s'); |
317 | Mixins::animation('-duration', '1.125s'); |
| 345 | Mixins::animation('-timing-function', 'linear'); |
318 | Mixins::animation('-timing-function', 'linear'); |
| 346 | ?>
|
319 | ?>
|
| 347 | }
|
320 | }
|
| 348 | 321 | ||