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

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css - Rev 136