WebSVN - LCARS - Diff - Rev 50 and 58 - /trunk/styles/lcars-ani.css

 <?php
 namespace de\pointedears\css\least;
-// \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
+\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
-//
-// /* Cached resource expires in HTTP/1.1 caches 24h after last retrieval */
+/* Cached resource expires in HTTP/1.1 caches 0h after last retrieval */
-// \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
+\header('Cache-Control: max-age=86400, s-maxage=0'/*'86400*/.', must-revalidate, proxy-revalidate');
-//
-// /* Cached resource expires in HTTP/1.0 caches 24h after last retrieval */
+/* Cached resource expires in HTTP/1.0 caches 0h after last retrieval */
-// \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
+\header('Expires: ' . gmdate('D, d M Y H:i:s', time()/* + 86400*/) . ' GMT');
 \header('Content-Type: text/css; charset=UTF-8');
 require_once 'css/least/Mixins.php';
 ?>
 @CHARSET "UTF-8";
 /* 0.0 to 1.0 s */
 <?php
   Mixins::keyframes('fade-in',
     'from {
        opacity: 0;
+     }
      /* at 0.25 s */
 % {
        opacity: 0;
+     }
      to {
        opacity: 1;
      }');
 ?>
 body.fade-in {
   /* TODO: Step-by-step display instead */
   /*-webkit-animation-name: fade-in;*/
   /* -webkit-animation-iteration-count: infinite; */
+}
 /* 0.0 to 0.6 s */
 <?php
-  Mixins::keyframes('content',
+  Mixins::keyframes('empty-content',
     'from {
        opacity: 0;
+     }
      /* 0.6 s */
 % {
        opacity: 0;
      }');
 ?>
 .empty.fade-in #content {
   <?php
-    Mixins::animation('-name', 'content');
+    Mixins::animation('-name', 'empty-content');
     Mixins::animation('-duration', '0.6s');
     Mixins::animation('-timing-function', 'linear');
   ?>
+}
+/*
+time in s      |0.0                |0.5      |0.75     |1.0                |1.5
+                                   :   |0.625   :      :       |1.25
+                                   :   :  |0.63 |0.875
+bow-top        |------------------>|   :  :  :  :  :  :  :
+bow-top-left   |                   :-->|  :  :  :  :  :  :
+bow-top-text   |------------------>|   :  :  :  :  :  :  :
+menu-container |                   :   :->|  :  :  :  :  :
+footer         |------------------>|   :  :  :  :  :  :  :
+menu           |                   :   :->|  :  :  :  :  :
+footer-text    |------------------>|      :  :  :  :  :  :
+bow-bottom     |                          :> |  :  :  :  :
+elbo-bg        |                           :>|  :  :  :
+elbo           |                                :->|  :
+elbo-border    |                                         :->|
+content        |                                      :->|
+: bow-top-left
+*/
 /* 0.0 to 0.5 s */
 <?php
   Mixins::keyframes('bow-top',
     'from {
        left: 90%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 1.2em;
        border-bottom-right-radius: 1.2em;
      }');
 ?>
 .fade-in #bow-top {
   <?php
     Mixins::animation('-name', 'bow-top');
     Mixins::animation('-duration', '0.5s');
     Mixins::animation('-timing-function', 'linear');
   ?>
+}
 /* 0.0 to 0.5 s */
 <?php
   Mixins::keyframes('bow-top-text',
     'from {
        opacity: 0;
+     }
      /* shortly before 1.0 s */
 % {
        opacity: 0;
      }');
 ?>
 .fade-in #bow-top .text {
   <?php
     Mixins::animation('-name', 'bow-top-text');
     Mixins::animation('-duration', '0.5s');
     Mixins::animation('-timing-function', 'linear');
   ?>
+}
 /* 0.0 to 0.5 s */
 <?php
   Mixins::keyframes('footer',
     'from {
        left: 90%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }');
 ?>
 .empty.fade-in #footer {
   <?php
     Mixins::animation('-name', 'footer');
     Mixins::animation('-duration', '0.5s');
     Mixins::animation('-timing-function', 'linear');
   ?>
+}
 /* 0.0 to 0.5 s */
 <?php
   Mixins::keyframes('footer-text',
   'from {
      opacity: 0;
+   }
    /* shortly before 0.5 s */
 % {
      opacity: 0;
    }');
 ?>
 .empty.fade-in #footer .text {
   <?php
     Mixins::animation('-name', 'footer-text');
     Mixins::animation('-duration', '0.5s');
     Mixins::animation('-timing-function', 'linear');
   ?>
+}
-/* 0.0 to 0.625 s */
+/* 0.0 to 0.625s */
 <?php
   Mixins::keyframes('bow-top-left',
     'from {
        height: 0;
+     }
-     /* at 0.5 s */
+     /* at 0.5s */
 % {
        height: 0;
      }');
 ?>
 .fade-in #bow-top-left {
   <?php
     Mixins::animation('-name', 'bow-top-left');
     Mixins::animation('-duration', '0.625s');
     Mixins::animation('-timing-function', 'linear');
   ?>
+}
-/* 0.0 to 1.125 s */
+/* 0.0 to 0.63s */
 <?php
   Mixins::keyframes('menu-container',
     'from {
        opacity: 0;
+     }
-     /* at ca. 0.61875 s */
+     /* at ca. 0.61875s */
 % {
        opacity: 0;
+     }
-% {
+     to {
        opacity: 1;
-     }');
+     }'
+   );
 ?>
 .fade-in .menu-container {
   <?php
     Mixins::animation('-name', 'menu-container');
-    Mixins::animation('-duration', '1.125s');
+    Mixins::animation('-duration', '0.63s');
     Mixins::animation('-timing-function', 'linear');
   ?>
+}
-/* 0.0 to 1.125 s */
+/* 0.0 to 0.63s */
 <?php
-  Mixins::keyframes('menu',
+  Mixins::keyframes('menu', <<<CSS
-    'from {
+    from {
-       opacity: 0;
+      opacity: 0;
-     }
+    }
-     /* at ca. 0.61875 s */
+    /* at ca. 0.61875 s */
 % {
-       opacity: 0;
+      opacity: 0;
-     }
+    }
+    /* at ca. 0.63 s */
-% {
+    to {
-       opacity: 1;
+      opacity: 1;
+    }
+CSS
-     }');
+   );
 ?>
 .fade-in .menu
+{
   <?php
     Mixins::animation('-name', 'menu');
+    Mixins::animation('-duration', '0.63s');
+    Mixins::animation('-timing-function', 'linear');
+  ?>
+}
+/* 0.0 to 0.75s */
+<?php
+  Mixins::keyframes('bow-bottom', <<<CSS
+    from {
+      bottom: 2.6em;
+      width: 20.6em;
+      height: 0em;
+      border-bottom-right-radius: 0em;
+      opacity: 0;
+    }
+    /* 0.64125 s */
+% {
+      bottom: 2.6em;
+      width: 0em;
+      height: 0em;
+      border-bottom-right-radius: 0em;
+      opacity: 1;
+    }
+% {
+      bottom: 0.2em;
+      width: 20.6em;
+      height: 2.4em;
+      border-bottom-right-radius: 2em;
+    }
+CSS
+   );
+?>
+.fade-in #bow-bottom {
+  <?php
+    Mixins::animation('-name', 'bow-bottom');
+    Mixins::animation('-duration', '0.75s');
+    Mixins::animation('-timing-function', 'linear');
+  ?>
+}
+/* 0.0 to 0.875s */
+<?php
+  Mixins::keyframes('elbo-bg', <<<CSS
+    from {
+      opacity: 0;
+    }
+% {
+      opacity: 0;
+    }
+    /* 0.75 s */
+    to {
+      opacity: 1;
+    }
+CSS
+   );
+?>
+.fade-in .multi-display .upper .button,
+.fade-in .multi-display .lower .bg
+{
+  <?php
+    Mixins::animation('-name', 'elbo-bg');
+    Mixins::animation('-duration', '0.75s');
+    Mixins::animation('-timing-function', 'linear');
+  ?>
+}
+/* 0.0 to 0.875 */
+<?php
+  Mixins::keyframes('elbo', <<<CSS
+    from {
+      opacity: 0;
+    }
+% {
+      opacity: 0;
+    }
+    /* 0.875 s */
+    to {
+      opacity: 1;
+    }
+CSS
+   );
+?>
+.fade-in .multi-display .elbo {
+  <?php
+    Mixins::animation('-name', 'elbo');
+    Mixins::animation('-duration', '0.875s');
+    Mixins::animation('-timing-function', 'linear');
+  ?>
+}
+/* 0.0 to 1s */
+<?php
+  Mixins::keyframes('elbo-border', <<<CSS
+    from {
+      opacity: 0;
+    }
+    /* 0.99 s */
+% {
+      opacity: 0;
+    }
+    /* 1 s */
+    to {
+      opacity: 1;
+    }
+CSS
+   );
+?>
+.fade-in .multi-display .border {
+  <?php
+    Mixins::animation('-name', 'elbo-border');
+    Mixins::animation('-duration', '1s');
+    Mixins::animation('-timing-function', 'linear');
+  ?>
+}
+/* 0.0 to 1.125s */
+<?php
+  Mixins::keyframes('content', <<<CSS
+    from {
+      opacity: 0;
+    }
+% {
+      opacity: 0;
+    }
+    /* 1.125s */
+    to {
+      opacity: 1;
+    }
+CSS
+   );
+?>
+.fade-in #connectors,
+.fade-in #content
+{
+  <?php
+    Mixins::animation('-name', 'content');
     Mixins::animation('-duration', '1.125s');
     Mixins::animation('-timing-function', 'linear');
   ?>
+}

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css - Rev 50 → 58