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

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css @ 202 - Rev 136 → 175