WebSVN - LCARS - Diff - Rev 72 and 74 - /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,
.fade-in .multi-display .upper .title,
.fade-in .multi-display .upper .button
{
  <?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 #connectors,
.fade-in #content
{
  <?php
    Mixins::animation('-name', 'content');
    Mixins::animation('-duration', '1.125s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

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

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css - Rev 72 → 74