WebSVN - LCARS - Blame - Rev 184 - /branches/live/styles/lcars-ani.css

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

Subversion Repositories LCARS

(root)/branches/live/styles/lcars-ani.css @ 256 - Rev 184