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

Subversion Repositories LCARS

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