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

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

Subversion Repositories LCARS

(root)/branches/live/styles/lcars-ani.css @ 245 - Rev 58