WebSVN - LCARS - Blame - Rev 175 - /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
		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%;
175	PointedEar	86	min-width: auto;
50	PointedEar	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	?>
175	PointedEar	93
50	PointedEar	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
93	PointedEar	185	Mixins::keyframes('menu-container', <<<CSS
		186	from {
		187	opacity: 0;
		188	}
		189
		190	/* at ca. 0.61875s */
		191	98% {
		192	opacity: 0;
		193	}
		194	CSS
58	PointedEar	195	);
50	PointedEar	196	?>
		197
		198	.fade-in .menu-container {
		199	<?php
		200	Mixins::animation('-name', 'menu-container');
58	PointedEar	201	Mixins::animation('-duration', '0.63s');
50	PointedEar	202	Mixins::animation('-timing-function', 'linear');
		203	?>
		204	}
		205
58	PointedEar	206	/* 0.0 to 0.63s */
50	PointedEar	207	<?php
58	PointedEar	208	Mixins::keyframes('menu', <<<CSS
		209	from {
		210	opacity: 0;
		211	}
50	PointedEar	212
58	PointedEar	213	/* at ca. 0.61875 s */
		214	98% {
		215	opacity: 0;
		216	}
		217	CSS
		218	);
50	PointedEar	219	?>
		220
		221	.fade-in .menu
		222	{
		223	<?php
		224	Mixins::animation('-name', 'menu');
58	PointedEar	225	Mixins::animation('-duration', '0.63s');
		226	Mixins::animation('-timing-function', 'linear');
		227	?>
		228	}
		229
		230	/* 0.0 to 0.75s */
		231	<?php
		232	Mixins::keyframes('bow-bottom', <<<CSS
		233	from {
		234	bottom: 2.6em;
		235	height: 0em;
		236	opacity: 0;
		237	}
		238
		239	/* 0.64125 s */
119	PointedEar	240	83%, 97% {
58	PointedEar	241	bottom: 2.6em;
		242	width: 0em;
		243	height: 0em;
		244	opacity: 1;
		245	}
		246	CSS
		247	);
		248	?>
		249
		250	.fade-in #bow-bottom {
		251	<?php
		252	Mixins::animation('-name', 'bow-bottom');
		253	Mixins::animation('-duration', '0.75s');
		254	Mixins::animation('-timing-function', 'linear');
		255	?>
		256	}
		257
		258	/* 0.0 to 0.875s */
		259	<?php
		260	Mixins::keyframes('elbo-bg', <<<CSS
175	PointedEar	261	from, 99% {
58	PointedEar	262	opacity: 0;
		263	}
		264	CSS
		265	);
		266	?>
		267
74	PointedEar	268	.fade-in .multi-display .upper .elbo-button,
58	PointedEar	269	.fade-in .multi-display .lower .bg
		270	{
		271	<?php
		272	Mixins::animation('-name', 'elbo-bg');
		273	Mixins::animation('-duration', '0.75s');
		274	Mixins::animation('-timing-function', 'linear');
		275	?>
		276	}
		277
		278	/* 0.0 to 0.875 */
		279	<?php
		280	Mixins::keyframes('elbo', <<<CSS
		281	from {
		282	opacity: 0;
		283	}
		284
		285	99% {
		286	opacity: 0;
		287	}
		288	CSS
		289	);
		290	?>
		291
		292	.fade-in .multi-display .elbo {
		293	<?php
		294	Mixins::animation('-name', 'elbo');
		295	Mixins::animation('-duration', '0.875s');
		296	Mixins::animation('-timing-function', 'linear');
		297	?>
		298	}
		299
		300	/* 0.0 to 1s */
		301	<?php
		302	Mixins::keyframes('elbo-border', <<<CSS
		303	from {
		304	opacity: 0;
		305	}
		306
		307	/* 0.99 s */
		308	99% {
		309	opacity: 0;
		310	}
		311	CSS
		312	);
		313	?>
		314
81	PointedEar	315	.fade-in .multi-display .border
72	PointedEar	316	{
58	PointedEar	317	<?php
		318	Mixins::animation('-name', 'elbo-border');
		319	Mixins::animation('-duration', '1s');
		320	Mixins::animation('-timing-function', 'linear');
		321	?>
		322	}
		323
		324	/* 0.0 to 1.125s */
		325	<?php
		326	Mixins::keyframes('content', <<<CSS
		327	from {
		328	opacity: 0;
		329	}
		330
		331	99% {
		332	opacity: 0;
		333	}
		334	CSS
		335	);
		336	?>
		337
118	PointedEar	338	.fade-in .multi-display .upper .content,
58	PointedEar	339	.fade-in #connectors,
		340	.fade-in #content
		341	{
		342	<?php
		343	Mixins::animation('-name', 'content');
50	PointedEar	344	Mixins::animation('-duration', '1.125s');
		345	Mixins::animation('-timing-function', 'linear');
		346	?>
118	PointedEar	347	}

Subversion Repositories LCARS

(root)/branches/live/styles/lcars-ani.css @ 278 - Rev 175