WebSVN - LCARS - Blame - Rev 93 - /trunk/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
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	width: 20.6em;
		236	height: 0em;
		237	border-bottom-right-radius: 0em;
		238	opacity: 0;
		239	}
		240
		241	/* 0.64125 s */
		242	83% {
		243	bottom: 2.6em;
		244	width: 0em;
		245	height: 0em;
		246	border-bottom-right-radius: 0em;
		247	opacity: 1;
		248	}
		249
		250	98% {
		251	bottom: 0.2em;
		252	width: 20.6em;
		253	height: 2.4em;
		254	border-bottom-right-radius: 2em;
		255	}
		256	CSS
		257	);
		258	?>
		259
		260	.fade-in #bow-bottom {
		261	<?php
		262	Mixins::animation('-name', 'bow-bottom');
		263	Mixins::animation('-duration', '0.75s');
		264	Mixins::animation('-timing-function', 'linear');
		265	?>
		266	}
		267
		268	/* 0.0 to 0.875s */
		269	<?php
		270	Mixins::keyframes('elbo-bg', <<<CSS
		271	from {
		272	opacity: 0;
		273	}
		274
		275	99% {
		276	opacity: 0;
		277	}
		278	CSS
		279	);
		280	?>
		281
74	PointedEar	282	.fade-in .multi-display .upper .elbo-button,
58	PointedEar	283	.fade-in .multi-display .lower .bg
		284	{
		285	<?php
		286	Mixins::animation('-name', 'elbo-bg');
		287	Mixins::animation('-duration', '0.75s');
		288	Mixins::animation('-timing-function', 'linear');
		289	?>
		290	}
		291
		292	/* 0.0 to 0.875 */
		293	<?php
		294	Mixins::keyframes('elbo', <<<CSS
		295	from {
		296	opacity: 0;
		297	}
		298
		299	99% {
		300	opacity: 0;
		301	}
		302	CSS
		303	);
		304	?>
		305
		306	.fade-in .multi-display .elbo {
		307	<?php
		308	Mixins::animation('-name', 'elbo');
		309	Mixins::animation('-duration', '0.875s');
		310	Mixins::animation('-timing-function', 'linear');
		311	?>
		312	}
		313
		314	/* 0.0 to 1s */
		315	<?php
		316	Mixins::keyframes('elbo-border', <<<CSS
		317	from {
		318	opacity: 0;
		319	}
		320
		321	/* 0.99 s */
		322	99% {
		323	opacity: 0;
		324	}
		325	CSS
		326	);
		327	?>
		328
81	PointedEar	329	.fade-in .multi-display .border
72	PointedEar	330	{
58	PointedEar	331	<?php
		332	Mixins::animation('-name', 'elbo-border');
		333	Mixins::animation('-duration', '1s');
		334	Mixins::animation('-timing-function', 'linear');
		335	?>
		336	}
		337
		338	/* 0.0 to 1.125s */
		339	<?php
		340	Mixins::keyframes('content', <<<CSS
		341	from {
		342	opacity: 0;
		343	}
		344
		345	99% {
		346	opacity: 0;
		347	}
		348	CSS
		349	);
		350	?>
		351
81	PointedEar	352	.fade-in .multi-display .upper .title,
		353	.fade-in .multi-display .upper .button,
58	PointedEar	354	.fade-in #connectors,
		355	.fade-in #content
		356	{
		357	<?php
		358	Mixins::animation('-name', 'content');
50	PointedEar	359	Mixins::animation('-duration', '1.125s');
		360	Mixins::animation('-timing-function', 'linear');
		361	?>
		362	}

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css @ 120 - Rev 93