WebSVN - LCARS - Diff - Rev 118 and 119 - /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');

/* 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';
?>@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');
  ?>
}

<?php
  Mixins::keyframes('analysis', <<<CSS
    from, 74% {
      opacity: 0;
    }

    75% {
      opacity: 1;
    }
CSS
   );
?>

/*
.multi-display .upper .content .analysis:hover tr {
  <?php
    Mixins::animation('-play-state', 'paused');
  ?>  
}
*/
.multi-display .upper .content .analysis tr:nth-child(1) {
  <?php
    Mixins::animation('-name', 'analysis');
    Mixins::animation('-duration', '1.5s');
    //Mixins::animation('-iteration-count', 'infinite');
    Mixins::animation('-timing-function', 'linear');
  ?>  
}

.multi-display .upper .content .analysis tr:nth-child(2) {
  <?php
    Mixins::animation('-name', 'analysis');
    Mixins::animation('-delay', '0.25s');
    Mixins::animation('-duration', '1.5s');
    //Mixins::animation('-iteration-count', 'infinite');
    Mixins::animation('-timing-function', 'linear');
  ?>  
}

.multi-display .upper .content .analysis tr:nth-child(3) {
  <?php
    Mixins::animation('-name', 'analysis');
    Mixins::animation('-delay', '0.5s');
    Mixins::animation('-duration', '1.5s');
    //Mixins::animation('-iteration-count', 'infinite');
    Mixins::animation('-timing-function', 'linear');
  ?>  
}
 

Rev 118	Rev 119
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	/* Resource expires in HTTP/1.1 caches 24h after last retrieval */	6	/* 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');	7	\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
8		8
9	/* Resource expires in HTTP/1.0 caches 24h after last retrieval */	9	/* 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');	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', <<<CSS	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	CSS	194	CSS
195	);	195	);
196	?>	196	?>
197		197
198	.fade-in .menu-container {	198	.fade-in .menu-container {
199	<?php	199	<?php
200	Mixins::animation('-name', 'menu-container');	200	Mixins::animation('-name', 'menu-container');
201	Mixins::animation('-duration', '0.63s');	201	Mixins::animation('-duration', '0.63s');
202	Mixins::animation('-timing-function', 'linear');	202	Mixins::animation('-timing-function', 'linear');
203	?>	203	?>
204	}	204	}
205		205
206	/* 0.0 to 0.63s */	206	/* 0.0 to 0.63s */
207	<?php	207	<?php
208	Mixins::keyframes('menu', <<<CSS	208	Mixins::keyframes('menu', <<<CSS
209	from {	209	from {
210	opacity: 0;	210	opacity: 0;
211	}	211	}
212		212
213	/* at ca. 0.61875 s */	213	/* at ca. 0.61875 s */
214	98% {	214	98% {
215	opacity: 0;	215	opacity: 0;
216	}	216	}
217	CSS	217	CSS
218	);	218	);
219	?>	219	?>
220		220
221	.fade-in .menu	221	.fade-in .menu
222	{	222	{
223	<?php	223	<?php
224	Mixins::animation('-name', 'menu');	224	Mixins::animation('-name', 'menu');
225	Mixins::animation('-duration', '0.63s');	225	Mixins::animation('-duration', '0.63s');
226	Mixins::animation('-timing-function', 'linear');	226	Mixins::animation('-timing-function', 'linear');
227	?>	227	?>
228	}	228	}
229		229
230	/* 0.0 to 0.75s */	230	/* 0.0 to 0.75s */
231	<?php	231	<?php
232	Mixins::keyframes('bow-bottom', <<<CSS	232	Mixins::keyframes('bow-bottom', <<<CSS
233	from {	233	from {
234	bottom: 2.6em;	234	bottom: 2.6em;
235	width: 20.6em;	-
236	height: 0em;	235	height: 0em;
237	border-bottom-right-radius: 0em;	-
238	opacity: 0;	236	opacity: 0;
239	}	237	}
240		238
241	/* 0.64125 s */	239	/* 0.64125 s */
242	83% {	240	83%, 97% {
243	bottom: 2.6em;	241	bottom: 2.6em;
244	width: 0em;	242	width: 0em;
245	height: 0em;	243	height: 0em;
246	border-bottom-right-radius: 0em;	-
247	opacity: 1;	244	opacity: 1;
248	}	245	}
249		-
250	98% {	-
251	bottom: 0.2em;	-
252	width: 20.6em;	-
253	height: 2.4em;	-
254	border-bottom-right-radius: 2em;	-
255	}	-
256	CSS	246	CSS
257	);	247	);
258	?>	248	?>
259		249
260	.fade-in #bow-bottom {	250	.fade-in #bow-bottom {
261	<?php	251	<?php
262	Mixins::animation('-name', 'bow-bottom');	252	Mixins::animation('-name', 'bow-bottom');
263	Mixins::animation('-duration', '0.75s');	253	Mixins::animation('-duration', '0.75s');
264	Mixins::animation('-timing-function', 'linear');	254	Mixins::animation('-timing-function', 'linear');
265	?>	255	?>
266	}	256	}
267		257
268	/* 0.0 to 0.875s */	258	/* 0.0 to 0.875s */
269	<?php	259	<?php
270	Mixins::keyframes('elbo-bg', <<<CSS	260	Mixins::keyframes('elbo-bg', <<<CSS
271	from {	261	from {
272	opacity: 0;	262	opacity: 0;
273	}	263	}
274		264
275	99% {	265	99% {
276	opacity: 0;	266	opacity: 0;
277	}	267	}
278	CSS	268	CSS
279	);	269	);
280	?>	270	?>
281		271
282	.fade-in .multi-display .upper .elbo-button,	272	.fade-in .multi-display .upper .elbo-button,
283	.fade-in .multi-display .lower .bg	273	.fade-in .multi-display .lower .bg
284	{	274	{
285	<?php	275	<?php
286	Mixins::animation('-name', 'elbo-bg');	276	Mixins::animation('-name', 'elbo-bg');
287	Mixins::animation('-duration', '0.75s');	277	Mixins::animation('-duration', '0.75s');
288	Mixins::animation('-timing-function', 'linear');	278	Mixins::animation('-timing-function', 'linear');
289	?>	279	?>
290	}	280	}
291		281
292	/* 0.0 to 0.875 */	282	/* 0.0 to 0.875 */
293	<?php	283	<?php
294	Mixins::keyframes('elbo', <<<CSS	284	Mixins::keyframes('elbo', <<<CSS
295	from {	285	from {
296	opacity: 0;	286	opacity: 0;
297	}	287	}
298		288
299	99% {	289	99% {
300	opacity: 0;	290	opacity: 0;
301	}	291	}
302	CSS	292	CSS
303	);	293	);
304	?>	294	?>
305		295
306	.fade-in .multi-display .elbo {	296	.fade-in .multi-display .elbo {
307	<?php	297	<?php
308	Mixins::animation('-name', 'elbo');	298	Mixins::animation('-name', 'elbo');
309	Mixins::animation('-duration', '0.875s');	299	Mixins::animation('-duration', '0.875s');
310	Mixins::animation('-timing-function', 'linear');	300	Mixins::animation('-timing-function', 'linear');
311	?>	301	?>
312	}	302	}
313		303
314	/* 0.0 to 1s */	304	/* 0.0 to 1s */
315	<?php	305	<?php
316	Mixins::keyframes('elbo-border', <<<CSS	306	Mixins::keyframes('elbo-border', <<<CSS
317	from {	307	from {
318	opacity: 0;	308	opacity: 0;
319	}	309	}
320		310
321	/* 0.99 s */	311	/* 0.99 s */
322	99% {	312	99% {
323	opacity: 0;	313	opacity: 0;
324	}	314	}
325	CSS	315	CSS
326	);	316	);
327	?>	317	?>
328		318
329	.fade-in .multi-display .border	319	.fade-in .multi-display .border
330	{	320	{
331	<?php	321	<?php
332	Mixins::animation('-name', 'elbo-border');	322	Mixins::animation('-name', 'elbo-border');
333	Mixins::animation('-duration', '1s');	323	Mixins::animation('-duration', '1s');
334	Mixins::animation('-timing-function', 'linear');	324	Mixins::animation('-timing-function', 'linear');
335	?>	325	?>
336	}	326	}
337		327
338	/* 0.0 to 1.125s */	328	/* 0.0 to 1.125s */
339	<?php	329	<?php
340	Mixins::keyframes('content', <<<CSS	330	Mixins::keyframes('content', <<<CSS
341	from {	331	from {
342	opacity: 0;	332	opacity: 0;
343	}	333	}
344		334
345	99% {	335	99% {
346	opacity: 0;	336	opacity: 0;
347	}	337	}
348	CSS	338	CSS
349	);	339	);
350	?>	340	?>
351		341
352	.fade-in .multi-display .upper .content,	342	.fade-in .multi-display .upper .content,
353	.fade-in #connectors,	343	.fade-in #connectors,
354	.fade-in #content	344	.fade-in #content
355	{	345	{
356	<?php	346	<?php
357	Mixins::animation('-name', 'content');	347	Mixins::animation('-name', 'content');
358	Mixins::animation('-duration', '1.125s');	348	Mixins::animation('-duration', '1.125s');
359	Mixins::animation('-timing-function', 'linear');	349	Mixins::animation('-timing-function', 'linear');
360	?>	350	?>
361	}	351	}
362		352
363	<?php	353	<?php
364	Mixins::keyframes('analysis', <<<CSS	354	Mixins::keyframes('analysis', <<<CSS
365	from, 74% {	355	from, 74% {
366	opacity: 0;	356	opacity: 0;
367	}	357	}
368		358
369	75% {	359	75% {
370	opacity: 1;	360	opacity: 1;
371	}	361	}
372	CSS	362	CSS
373	);	363	);
374	?>	364	?>
375		365
376	/*	366	/*
377	.multi-display .upper .content .analysis:hover tr {	367	.multi-display .upper .content .analysis:hover tr {
378	<?php	368	<?php
379	Mixins::animation('-play-state', 'paused');	369	Mixins::animation('-play-state', 'paused');
380	?>	370	?>
381	}	371	}
382	*/	372	*/
383	.multi-display .upper .content .analysis tr:nth-child(1) {	373	.multi-display .upper .content .analysis tr:nth-child(1) {
384	<?php	374	<?php
385	Mixins::animation('-name', 'analysis');	375	Mixins::animation('-name', 'analysis');
386	Mixins::animation('-duration', '1.5s');	376	Mixins::animation('-duration', '1.5s');
387	//Mixins::animation('-iteration-count', 'infinite');	377	//Mixins::animation('-iteration-count', 'infinite');
388	Mixins::animation('-timing-function', 'linear');	378	Mixins::animation('-timing-function', 'linear');
389	?>	379	?>
390	}	380	}
391		381
392	.multi-display .upper .content .analysis tr:nth-child(2) {	382	.multi-display .upper .content .analysis tr:nth-child(2) {
393	<?php	383	<?php
394	Mixins::animation('-name', 'analysis');	384	Mixins::animation('-name', 'analysis');
395	Mixins::animation('-delay', '0.25s');	385	Mixins::animation('-delay', '0.25s');
396	Mixins::animation('-duration', '1.5s');	386	Mixins::animation('-duration', '1.5s');
397	//Mixins::animation('-iteration-count', 'infinite');	387	//Mixins::animation('-iteration-count', 'infinite');
398	Mixins::animation('-timing-function', 'linear');	388	Mixins::animation('-timing-function', 'linear');
399	?>	389	?>
400	}	390	}
401		391
402	.multi-display .upper .content .analysis tr:nth-child(3) {	392	.multi-display .upper .content .analysis tr:nth-child(3) {
403	<?php	393	<?php
404	Mixins::animation('-name', 'analysis');	394	Mixins::animation('-name', 'analysis');
405	Mixins::animation('-delay', '0.5s');	395	Mixins::animation('-delay', '0.5s');
406	Mixins::animation('-duration', '1.5s');	396	Mixins::animation('-duration', '1.5s');
407	//Mixins::animation('-iteration-count', 'infinite');	397	//Mixins::animation('-iteration-count', 'infinite');
408	Mixins::animation('-timing-function', 'linear');	398	Mixins::animation('-timing-function', 'linear');
409	?>	399	?>
410	}	400	}
411		401

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css - Rev 118 → 119