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

Subversion Repositories LCARS

(root)/branches/live/styles/lcars-ani.css @ 276 - Rev 81