WebSVN - LCARS - Diff - Rev 74 and 81 - /trunk/styles/lcars-ani.css


<?php
namespace de\pointedears\css\least;

\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');

/* Cached resource expires in HTTP/1.1 caches 0h after last retrieval */
\header('Cache-Control: max-age=86400, s-maxage=0'/*'86400*/.', must-revalidate, proxy-revalidate');

/* Cached resource expires in HTTP/1.0 caches 0h after last retrieval */
\header('Expires: ' . gmdate('D, d M Y H:i:s', time()/* + 86400*/) . ' GMT');
 
\header('Content-Type: text/css; charset=UTF-8');

require_once 'css/least/Mixins.php';
 
?>@charset "UTF-8";

/* 0.0 to 1.0 s */
<?php
  Mixins::keyframes('fade-in',
    'from {
       opacity: 0;
     }
   
     /* at 0.25 s */
     25% {
       opacity: 0;
     }
   
     to {
       opacity: 1;
     }');
?>

body.fade-in {
  /* TODO: Step-by-step display instead */
  /*-webkit-animation-name: fade-in;*/
  /* -webkit-animation-iteration-count: infinite; */
}

/* 0.0 to 0.6 s */
<?php
  Mixins::keyframes('empty-content',
    'from {
       opacity: 0;
     }
     
     /* 0.6 s */
     99% {
       opacity: 0;
     }');
?>

.empty.fade-in #content {
  <?php
    Mixins::animation('-name', 'empty-content');
    Mixins::animation('-duration', '0.6s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/*
time in s      |0.0                |0.5      |0.75     |1.0                |1.5
                                   :   |0.625   :      :       |1.25
                                   :   :  |0.63 |0.875
bow-top        |------------------>|   :  :  :  :  :  :  :
bow-top-left   |                   :-->|  :  :  :  :  :  :
bow-top-text   |------------------>|   :  :  :  :  :  :  :
menu-container |                   :   :->|  :  :  :  :  :
footer         |------------------>|   :  :  :  :  :  :  :
menu           |                   :   :->|  :  :  :  :  :
footer-text    |------------------>|      :  :  :  :  :  :
bow-bottom     |                          :> |  :  :  :  :
elbo-bg        |                           :>|  :  :  :
elbo           |                                :->|  :
elbo-border    |                                         :->|
content        |                                      :->|

1: bow-top-left

*/

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('bow-top',
    'from {
       left: 90%;
       border-top-left-radius: 0;    
       border-bottom-left-radius: 0;    
       border-top-right-radius: 1.2em;
       border-bottom-right-radius: 1.2em;
     }');
?>
       
.fade-in #bow-top {
  <?php
    Mixins::animation('-name', 'bow-top');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('bow-top-text',
    'from {
       opacity: 0;
     }
   
     /* shortly before 1.0 s */
     99% {
       opacity: 0;
     }');
?>

.fade-in #bow-top .text {
  <?php
    Mixins::animation('-name', 'bow-top-text');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('footer',
    'from {
       left: 90%;
       border-top-left-radius: 0;    
       border-bottom-left-radius: 0;    
     }');
?>

.empty.fade-in #footer {
  <?php
    Mixins::animation('-name', 'footer');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('footer-text',
  'from {
     opacity: 0;
   }
 
   /* shortly before 0.5 s */
   99% {
     opacity: 0;
   }');
?>

.empty.fade-in #footer .text {
  <?php
    Mixins::animation('-name', 'footer-text');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.625s */
<?php
  Mixins::keyframes('bow-top-left',
    'from {
       height: 0;
     }

     /* at 0.5s */
     80% {
       height: 0;
     }');
?>
     
.fade-in #bow-top-left {
  <?php
    Mixins::animation('-name', 'bow-top-left');
    Mixins::animation('-duration', '0.625s');  
    Mixins::animation('-timing-function', 'linear');
  ?>  
}

/* 0.0 to 0.63s */
<?php
  Mixins::keyframes('menu-container',
    'from {
       opacity: 0;
     }
     
     /* at ca. 0.61875s */
     98% {
       opacity: 0;
     }
     
     to {
       opacity: 1;
     }'
   );
?>

.fade-in .menu-container {
  <?php
    Mixins::animation('-name', 'menu-container');
    Mixins::animation('-duration', '0.63s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.63s */
<?php
  Mixins::keyframes('menu', <<<CSS
    from {
      opacity: 0;
    }
     
    /* at ca. 0.61875 s */
    98% {
      opacity: 0;
    }
     
    /* at ca. 0.63 s */
    to {
      opacity: 1;
    }
CSS
   );
?>

.fade-in .menu
{
  <?php
    Mixins::animation('-name', 'menu');
    Mixins::animation('-duration', '0.63s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.75s */
<?php
  Mixins::keyframes('bow-bottom', <<<CSS
    from {
      bottom: 2.6em;
      width: 20.6em;
      height: 0em;
      border-bottom-right-radius: 0em;
      opacity: 0;
    }

    /* 0.64125 s */
    83% {
      bottom: 2.6em;
      width: 0em;
      height: 0em;
      border-bottom-right-radius: 0em;
      opacity: 1;
    }

    98% {
      bottom: 0.2em;
      width: 20.6em;
      height: 2.4em;
      border-bottom-right-radius: 2em;
    }
CSS
   );
?>

.fade-in #bow-bottom {
  <?php
    Mixins::animation('-name', 'bow-bottom');
    Mixins::animation('-duration', '0.75s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.875s */
<?php
  Mixins::keyframes('elbo-bg', <<<CSS
    from {
      opacity: 0;
    }

    99% {
      opacity: 0;
    }

    /* 0.75 s */
    to {
      opacity: 1;
    }
CSS
   );
?>

.fade-in .multi-display .upper .elbo-button,
.fade-in .multi-display .lower .bg
{
  <?php
    Mixins::animation('-name', 'elbo-bg');
    Mixins::animation('-duration', '0.75s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.875 */
<?php
  Mixins::keyframes('elbo', <<<CSS
    from {
      opacity: 0;
    }

    99% {
      opacity: 0;
    }

    /* 0.875 s */
    to {
      opacity: 1;
    }
CSS
   );
?>

.fade-in .multi-display .elbo {
  <?php
    Mixins::animation('-name', 'elbo');
    Mixins::animation('-duration', '0.875s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 1s */
<?php
  Mixins::keyframes('elbo-border', <<<CSS
    from {
      opacity: 0;
    }

    /* 0.99 s */
    99% {
      opacity: 0;
    }

    /* 1 s */
    to {
      opacity: 1;
    }
CSS
   );
?>

.fade-in .multi-display .border
 
 
{
  <?php
    Mixins::animation('-name', 'elbo-border');
    Mixins::animation('-duration', '1s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 1.125s */
<?php
  Mixins::keyframes('content', <<<CSS
    from {
      opacity: 0;
    }
   
    99% {
      opacity: 0;
    }

    /* 1.125s */
    to {
      opacity: 1;
    }
CSS
   );
?>

.fade-in .multi-display .upper .title,
.fade-in .multi-display .upper .button,
.fade-in #connectors,
.fade-in #content
{
  <?php
    Mixins::animation('-name', 'content');
    Mixins::animation('-duration', '1.125s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

Rev 74	Rev 81
1	<?php	1	<?php
2	namespace de\pointedears\css\least;	2	namespace de\pointedears\css\least;
3		3
4	\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');	4	\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
5		5
6	/* Cached resource expires in HTTP/1.1 caches 0h after last retrieval */	6	/* Cached resource expires in HTTP/1.1 caches 0h after last retrieval */
7	\header('Cache-Control: max-age=86400, s-maxage=0'/'86400/.', must-revalidate, proxy-revalidate');	7	\header('Cache-Control: max-age=86400, s-maxage=0'/'86400/.', must-revalidate, proxy-revalidate');
8		8
9	/* Cached resource expires in HTTP/1.0 caches 0h after last retrieval */	9	/* Cached resource expires in HTTP/1.0 caches 0h after last retrieval */
10	\header('Expires: ' . gmdate('D, d M Y H:i:s', time()/* + 86400*/) . ' GMT');	10	\header('Expires: ' . gmdate('D, d M Y H:i:s', time()/* + 86400*/) . ' GMT');
11		11
12	\header('Content-Type: text/css; charset=UTF-8');	12	\header('Content-Type: text/css; charset=UTF-8');
13		13
14	require_once 'css/least/Mixins.php';	14	require_once 'css/least/Mixins.php';
15	?>	-
16	@CHARSET "UTF-8";	15	?>@charset "UTF-8";
17		16
18	/* 0.0 to 1.0 s */	17	/* 0.0 to 1.0 s */
19	<?php	18	<?php
20	Mixins::keyframes('fade-in',	19	Mixins::keyframes('fade-in',
21	'from {	20	'from {
22	opacity: 0;	21	opacity: 0;
23	}	22	}
24		23
25	/* at 0.25 s */	24	/* at 0.25 s */
26	25% {	25	25% {
27	opacity: 0;	26	opacity: 0;
28	}	27	}
29		28
30	to {	29	to {
31	opacity: 1;	30	opacity: 1;
32	}');	31	}');
33	?>	32	?>
34		33
35	body.fade-in {	34	body.fade-in {
36	/* TODO: Step-by-step display instead */	35	/* TODO: Step-by-step display instead */
37	/-webkit-animation-name: fade-in;/	36	/-webkit-animation-name: fade-in;/
38	/* -webkit-animation-iteration-count: infinite; */	37	/* -webkit-animation-iteration-count: infinite; */
39	}	38	}
40		39
41	/* 0.0 to 0.6 s */	40	/* 0.0 to 0.6 s */
42	<?php	41	<?php
43	Mixins::keyframes('empty-content',	42	Mixins::keyframes('empty-content',
44	'from {	43	'from {
45	opacity: 0;	44	opacity: 0;
46	}	45	}
47		46
48	/* 0.6 s */	47	/* 0.6 s */
49	99% {	48	99% {
50	opacity: 0;	49	opacity: 0;
51	}');	50	}');
52	?>	51	?>
53		52
54	.empty.fade-in #content {	53	.empty.fade-in #content {
55	<?php	54	<?php
56	Mixins::animation('-name', 'empty-content');	55	Mixins::animation('-name', 'empty-content');
57	Mixins::animation('-duration', '0.6s');	56	Mixins::animation('-duration', '0.6s');
58	Mixins::animation('-timing-function', 'linear');	57	Mixins::animation('-timing-function', 'linear');
59	?>	58	?>
60	}	59	}
61		60
62	/*	61	/*
63	time in s \|0.0 \|0.5 \|0.75 \|1.0 \|1.5	62	time in s \|0.0 \|0.5 \|0.75 \|1.0 \|1.5
64	: \|0.625 : : \|1.25	63	: \|0.625 : : \|1.25
65	: : \|0.63 \|0.875	64	: : \|0.63 \|0.875
66	bow-top \|------------------>\| : : : : : : :	65	bow-top \|------------------>\| : : : : : : :
67	bow-top-left \| :-->\| : : : : : :	66	bow-top-left \| :-->\| : : : : : :
68	bow-top-text \|------------------>\| : : : : : : :	67	bow-top-text \|------------------>\| : : : : : : :
69	menu-container \| : :->\| : : : : :	68	menu-container \| : :->\| : : : : :
70	footer \|------------------>\| : : : : : : :	69	footer \|------------------>\| : : : : : : :
71	menu \| : :->\| : : : : :	70	menu \| : :->\| : : : : :
72	footer-text \|------------------>\| : : : : : :	71	footer-text \|------------------>\| : : : : : :
73	bow-bottom \| :> \| : : : :	72	bow-bottom \| :> \| : : : :
74	elbo-bg \| :>\| : : :	73	elbo-bg \| :>\| : : :
75	elbo \| :->\| :	74	elbo \| :->\| :
76	elbo-border \| :->\|	75	elbo-border \| :->\|
77	content \| :->\|	76	content \| :->\|
78		77
79	1: bow-top-left	78	1: bow-top-left
80		79
81	*/	80	*/
82		81
83	/* 0.0 to 0.5 s */	82	/* 0.0 to 0.5 s */
84	<?php	83	<?php
85	Mixins::keyframes('bow-top',	84	Mixins::keyframes('bow-top',
86	'from {	85	'from {
87	left: 90%;	86	left: 90%;
88	border-top-left-radius: 0;	87	border-top-left-radius: 0;
89	border-bottom-left-radius: 0;	88	border-bottom-left-radius: 0;
90	border-top-right-radius: 1.2em;	89	border-top-right-radius: 1.2em;
91	border-bottom-right-radius: 1.2em;	90	border-bottom-right-radius: 1.2em;
92	}');	91	}');
93	?>	92	?>
94		93
95	.fade-in #bow-top {	94	.fade-in #bow-top {
96	<?php	95	<?php
97	Mixins::animation('-name', 'bow-top');	96	Mixins::animation('-name', 'bow-top');
98	Mixins::animation('-duration', '0.5s');	97	Mixins::animation('-duration', '0.5s');
99	Mixins::animation('-timing-function', 'linear');	98	Mixins::animation('-timing-function', 'linear');
100	?>	99	?>
101	}	100	}
102		101
103	/* 0.0 to 0.5 s */	102	/* 0.0 to 0.5 s */
104	<?php	103	<?php
105	Mixins::keyframes('bow-top-text',	104	Mixins::keyframes('bow-top-text',
106	'from {	105	'from {
107	opacity: 0;	106	opacity: 0;
108	}	107	}
109		108
110	/* shortly before 1.0 s */	109	/* shortly before 1.0 s */
111	99% {	110	99% {
112	opacity: 0;	111	opacity: 0;
113	}');	112	}');
114	?>	113	?>
115		114
116	.fade-in #bow-top .text {	115	.fade-in #bow-top .text {
117	<?php	116	<?php
118	Mixins::animation('-name', 'bow-top-text');	117	Mixins::animation('-name', 'bow-top-text');
119	Mixins::animation('-duration', '0.5s');	118	Mixins::animation('-duration', '0.5s');
120	Mixins::animation('-timing-function', 'linear');	119	Mixins::animation('-timing-function', 'linear');
121	?>	120	?>
122	}	121	}
123		122
124	/* 0.0 to 0.5 s */	123	/* 0.0 to 0.5 s */
125	<?php	124	<?php
126	Mixins::keyframes('footer',	125	Mixins::keyframes('footer',
127	'from {	126	'from {
128	left: 90%;	127	left: 90%;
129	border-top-left-radius: 0;	128	border-top-left-radius: 0;
130	border-bottom-left-radius: 0;	129	border-bottom-left-radius: 0;
131	}');	130	}');
132	?>	131	?>
133		132
134	.empty.fade-in #footer {	133	.empty.fade-in #footer {
135	<?php	134	<?php
136	Mixins::animation('-name', 'footer');	135	Mixins::animation('-name', 'footer');
137	Mixins::animation('-duration', '0.5s');	136	Mixins::animation('-duration', '0.5s');
138	Mixins::animation('-timing-function', 'linear');	137	Mixins::animation('-timing-function', 'linear');
139	?>	138	?>
140	}	139	}
141		140
142	/* 0.0 to 0.5 s */	141	/* 0.0 to 0.5 s */
143	<?php	142	<?php
144	Mixins::keyframes('footer-text',	143	Mixins::keyframes('footer-text',
145	'from {	144	'from {
146	opacity: 0;	145	opacity: 0;
147	}	146	}
148		147
149	/* shortly before 0.5 s */	148	/* shortly before 0.5 s */
150	99% {	149	99% {
151	opacity: 0;	150	opacity: 0;
152	}');	151	}');
153	?>	152	?>
154		153
155	.empty.fade-in #footer .text {	154	.empty.fade-in #footer .text {
156	<?php	155	<?php
157	Mixins::animation('-name', 'footer-text');	156	Mixins::animation('-name', 'footer-text');
158	Mixins::animation('-duration', '0.5s');	157	Mixins::animation('-duration', '0.5s');
159	Mixins::animation('-timing-function', 'linear');	158	Mixins::animation('-timing-function', 'linear');
160	?>	159	?>
161	}	160	}
162		161
163	/* 0.0 to 0.625s */	162	/* 0.0 to 0.625s */
164	<?php	163	<?php
165	Mixins::keyframes('bow-top-left',	164	Mixins::keyframes('bow-top-left',
166	'from {	165	'from {
167	height: 0;	166	height: 0;
168	}	167	}
169		168
170	/* at 0.5s */	169	/* at 0.5s */
171	80% {	170	80% {
172	height: 0;	171	height: 0;
173	}');	172	}');
174	?>	173	?>
175		174
176	.fade-in #bow-top-left {	175	.fade-in #bow-top-left {
177	<?php	176	<?php
178	Mixins::animation('-name', 'bow-top-left');	177	Mixins::animation('-name', 'bow-top-left');
179	Mixins::animation('-duration', '0.625s');	178	Mixins::animation('-duration', '0.625s');
180	Mixins::animation('-timing-function', 'linear');	179	Mixins::animation('-timing-function', 'linear');
181	?>	180	?>
182	}	181	}
183		182
184	/* 0.0 to 0.63s */	183	/* 0.0 to 0.63s */
185	<?php	184	<?php
186	Mixins::keyframes('menu-container',	185	Mixins::keyframes('menu-container',
187	'from {	186	'from {
188	opacity: 0;	187	opacity: 0;
189	}	188	}
190		189
191	/* at ca. 0.61875s */	190	/* at ca. 0.61875s */
192	98% {	191	98% {
193	opacity: 0;	192	opacity: 0;
194	}	193	}
195		194
196	to {	195	to {
197	opacity: 1;	196	opacity: 1;
198	}'	197	}'
199	);	198	);
200	?>	199	?>
201		200
202	.fade-in .menu-container {	201	.fade-in .menu-container {
203	<?php	202	<?php
204	Mixins::animation('-name', 'menu-container');	203	Mixins::animation('-name', 'menu-container');
205	Mixins::animation('-duration', '0.63s');	204	Mixins::animation('-duration', '0.63s');
206	Mixins::animation('-timing-function', 'linear');	205	Mixins::animation('-timing-function', 'linear');
207	?>	206	?>
208	}	207	}
209		208
210	/* 0.0 to 0.63s */	209	/* 0.0 to 0.63s */
211	<?php	210	<?php
212	Mixins::keyframes('menu', <<<CSS	211	Mixins::keyframes('menu', <<<CSS
213	from {	212	from {
214	opacity: 0;	213	opacity: 0;
215	}	214	}
216		215
217	/* at ca. 0.61875 s */	216	/* at ca. 0.61875 s */
218	98% {	217	98% {
219	opacity: 0;	218	opacity: 0;
220	}	219	}
221		220
222	/* at ca. 0.63 s */	221	/* at ca. 0.63 s */
223	to {	222	to {
224	opacity: 1;	223	opacity: 1;
225	}	224	}
226	CSS	225	CSS
227	);	226	);
228	?>	227	?>
229		228
230	.fade-in .menu	229	.fade-in .menu
231	{	230	{
232	<?php	231	<?php
233	Mixins::animation('-name', 'menu');	232	Mixins::animation('-name', 'menu');
234	Mixins::animation('-duration', '0.63s');	233	Mixins::animation('-duration', '0.63s');
235	Mixins::animation('-timing-function', 'linear');	234	Mixins::animation('-timing-function', 'linear');
236	?>	235	?>
237	}	236	}
238		237
239	/* 0.0 to 0.75s */	238	/* 0.0 to 0.75s */
240	<?php	239	<?php
241	Mixins::keyframes('bow-bottom', <<<CSS	240	Mixins::keyframes('bow-bottom', <<<CSS
242	from {	241	from {
243	bottom: 2.6em;	242	bottom: 2.6em;
244	width: 20.6em;	243	width: 20.6em;
245	height: 0em;	244	height: 0em;
246	border-bottom-right-radius: 0em;	245	border-bottom-right-radius: 0em;
247	opacity: 0;	246	opacity: 0;
248	}	247	}
249		248
250	/* 0.64125 s */	249	/* 0.64125 s */
251	83% {	250	83% {
252	bottom: 2.6em;	251	bottom: 2.6em;
253	width: 0em;	252	width: 0em;
254	height: 0em;	253	height: 0em;
255	border-bottom-right-radius: 0em;	254	border-bottom-right-radius: 0em;
256	opacity: 1;	255	opacity: 1;
257	}	256	}
258		257
259	98% {	258	98% {
260	bottom: 0.2em;	259	bottom: 0.2em;
261	width: 20.6em;	260	width: 20.6em;
262	height: 2.4em;	261	height: 2.4em;
263	border-bottom-right-radius: 2em;	262	border-bottom-right-radius: 2em;
264	}	263	}
265	CSS	264	CSS
266	);	265	);
267	?>	266	?>
268		267
269	.fade-in #bow-bottom {	268	.fade-in #bow-bottom {
270	<?php	269	<?php
271	Mixins::animation('-name', 'bow-bottom');	270	Mixins::animation('-name', 'bow-bottom');
272	Mixins::animation('-duration', '0.75s');	271	Mixins::animation('-duration', '0.75s');
273	Mixins::animation('-timing-function', 'linear');	272	Mixins::animation('-timing-function', 'linear');
274	?>	273	?>
275	}	274	}
276		275
277	/* 0.0 to 0.875s */	276	/* 0.0 to 0.875s */
278	<?php	277	<?php
279	Mixins::keyframes('elbo-bg', <<<CSS	278	Mixins::keyframes('elbo-bg', <<<CSS
280	from {	279	from {
281	opacity: 0;	280	opacity: 0;
282	}	281	}
283		282
284	99% {	283	99% {
285	opacity: 0;	284	opacity: 0;
286	}	285	}
287		286
288	/* 0.75 s */	287	/* 0.75 s */
289	to {	288	to {
290	opacity: 1;	289	opacity: 1;
291	}	290	}
292	CSS	291	CSS
293	);	292	);
294	?>	293	?>
295		294
296	.fade-in .multi-display .upper .elbo-button,	295	.fade-in .multi-display .upper .elbo-button,
297	.fade-in .multi-display .lower .bg	296	.fade-in .multi-display .lower .bg
298	{	297	{
299	<?php	298	<?php
300	Mixins::animation('-name', 'elbo-bg');	299	Mixins::animation('-name', 'elbo-bg');
301	Mixins::animation('-duration', '0.75s');	300	Mixins::animation('-duration', '0.75s');
302	Mixins::animation('-timing-function', 'linear');	301	Mixins::animation('-timing-function', 'linear');
303	?>	302	?>
304	}	303	}
305		304
306	/* 0.0 to 0.875 */	305	/* 0.0 to 0.875 */
307	<?php	306	<?php
308	Mixins::keyframes('elbo', <<<CSS	307	Mixins::keyframes('elbo', <<<CSS
309	from {	308	from {
310	opacity: 0;	309	opacity: 0;
311	}	310	}
312		311
313	99% {	312	99% {
314	opacity: 0;	313	opacity: 0;
315	}	314	}
316		315
317	/* 0.875 s */	316	/* 0.875 s */
318	to {	317	to {
319	opacity: 1;	318	opacity: 1;
320	}	319	}
321	CSS	320	CSS
322	);	321	);
323	?>	322	?>
324		323
325	.fade-in .multi-display .elbo {	324	.fade-in .multi-display .elbo {
326	<?php	325	<?php
327	Mixins::animation('-name', 'elbo');	326	Mixins::animation('-name', 'elbo');
328	Mixins::animation('-duration', '0.875s');	327	Mixins::animation('-duration', '0.875s');
329	Mixins::animation('-timing-function', 'linear');	328	Mixins::animation('-timing-function', 'linear');
330	?>	329	?>
331	}	330	}
332		331
333	/* 0.0 to 1s */	332	/* 0.0 to 1s */
334	<?php	333	<?php
335	Mixins::keyframes('elbo-border', <<<CSS	334	Mixins::keyframes('elbo-border', <<<CSS
336	from {	335	from {
337	opacity: 0;	336	opacity: 0;
338	}	337	}
339		338
340	/* 0.99 s */	339	/* 0.99 s */
341	99% {	340	99% {
342	opacity: 0;	341	opacity: 0;
343	}	342	}
344		343
345	/* 1 s */	344	/* 1 s */
346	to {	345	to {
347	opacity: 1;	346	opacity: 1;
348	}	347	}
349	CSS	348	CSS
350	);	349	);
351	?>	350	?>
352		351
353	.fade-in .multi-display .border,	352	.fade-in .multi-display .border
354	.fade-in .multi-display .upper .title,	-
355	.fade-in .multi-display .upper .button	-
356	{	353	{
357	<?php	354	<?php
358	Mixins::animation('-name', 'elbo-border');	355	Mixins::animation('-name', 'elbo-border');
359	Mixins::animation('-duration', '1s');	356	Mixins::animation('-duration', '1s');
360	Mixins::animation('-timing-function', 'linear');	357	Mixins::animation('-timing-function', 'linear');
361	?>	358	?>
362	}	359	}
363		360
364	/* 0.0 to 1.125s */	361	/* 0.0 to 1.125s */
365	<?php	362	<?php
366	Mixins::keyframes('content', <<<CSS	363	Mixins::keyframes('content', <<<CSS
367	from {	364	from {
368	opacity: 0;	365	opacity: 0;
369	}	366	}
370		367
371	99% {	368	99% {
372	opacity: 0;	369	opacity: 0;
373	}	370	}
374		371
375	/* 1.125s */	372	/* 1.125s */
376	to {	373	to {
377	opacity: 1;	374	opacity: 1;
378	}	375	}
379	CSS	376	CSS
380	);	377	);
381	?>	378	?>
382		379
-		380	.fade-in .multi-display .upper .title,
-		381	.fade-in .multi-display .upper .button,
383	.fade-in #connectors,	382	.fade-in #connectors,
384	.fade-in #content	383	.fade-in #content
385	{	384	{
386	<?php	385	<?php
387	Mixins::animation('-name', 'content');	386	Mixins::animation('-name', 'content');
388	Mixins::animation('-duration', '1.125s');	387	Mixins::animation('-duration', '1.125s');
389	Mixins::animation('-timing-function', 'linear');	388	Mixins::animation('-timing-function', 'linear');
390	?>	389	?>
391	}	390	}

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css @ 93 - Rev 74 → 81