WebSVN - LCARS - Diff - Rev 123 and 136 - /trunk/styles/lcars-ani.css


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

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

/* Resource expires in HTTP/1.0 caches 24h 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';
use de\pointedears\css\least\Mixins;
?>@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', <<<CSS
    from {
      opacity: 0;
    }
   
    /* at ca. 0.61875s */
    98% {
      opacity: 0;
    }    
CSS
   );
?>

.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;
    }
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;
      height: 0em;
      opacity: 0;
    }

    /* 0.64125 s */
    83%, 97% {
      bottom: 2.6em;
      width: 0em;
      height: 0em;
      opacity: 1;
    }
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;
    }
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;
    }
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;
    }
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;
    }
CSS
   );
?>

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

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

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css - Rev 123 → 136