WebSVN - LCARS - Diff - Rev 175 and 184 - /trunk/styles/lcars-ani.css

 <?php
 \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
 /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
 \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
 /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
 \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';
 use de\pointedears\css\least\Mixins;
 ?>@charset "UTF-8";
 /* 0.0 to 1.0 s */
 <?php
+  /* hide up to 0.25 s */
-  Mixins::keyframes('fade-in',
+  Mixins::keyframes('fade-in', <<<CSS
-    'from {
-       opacity: 0;
-     }
-     /* at 0.25 s */
-% {
+    from, 25% {
        opacity: 0;
+     }
      to {
        opacity: 1;
-     }');
+     }
+CSS
+  );
 ?>
 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
+   /* up to shortly before 0.6 s */
-  Mixins::keyframes('empty-content',
+  Mixins::keyframes('empty-content', <<<CSS
-    'from {
+    from, 99% {
        opacity: 0;
+     }
+CSS
-     /* 0.6 s */
-% {
-       opacity: 0;
-     }');
+  );
 ?>
 .empty.fade-in #content {
   <?php
     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%;
        min-width: auto;
        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
+  /* up to shortly before 0.5 s */
-  Mixins::keyframes('bow-top-text',
+  Mixins::keyframes('bow-top-text', <<<CSS
-    'from {
+    from, 99% {
        opacity: 0;
+     }
+CSS
-     /* 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
+   /* up to shortly before 0.5 s */
-  Mixins::keyframes('footer-text',
+  Mixins::keyframes('footer-text', <<<CSS
-  'from {
+    from, 99% {
-     opacity: 0;
+       opacity: 0;
-   }
+    }
+CSS
-   /* 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.625s */
 <?php
+   /* up to 0.5s */
-  Mixins::keyframes('bow-top-left',
+  Mixins::keyframes('bow-top-left', <<<CSS
-    'from {
+    from, 80% {
        height: 0;
+     }
+CSS
-     /* 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 0.63s */
 <?php
+  /* up to  ca. 0.61875s */
   Mixins::keyframes('menu-container', <<<CSS
-    from {
+    from, 98% {
       opacity: 0;
+    }
-    /* at ca. 0.61875s */
-% {
-      opacity: 0;
-    }
 CSS
    );
 ?>
 .fade-in .menu-container {
   <?php
     Mixins::animation('-name', 'menu-container');
     Mixins::animation('-duration', '0.63s');
     Mixins::animation('-timing-function', 'linear');
   ?>
+}
 /* 0.0 to 0.63s */
 <?php
+  /* up to ca. 0.61875 s */
   Mixins::keyframes('menu', <<<CSS
-    from {
+    from, 98% {
-      opacity: 0;
-    }
-    /* at ca. 0.61875 s */
-% {
       opacity: 0;
+    }
 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;
       height: 0em;
       opacity: 0;
+    }
     /* 0.64125 s */
 %, 97% {
       bottom: 2.6em;
       width: 0em;
       height: 0em;
       opacity: 1;
+    }
 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 */
+/* 0.0 to 0.75s */
 <?php
+  /* hide up to 0.7425 s */
   Mixins::keyframes('elbo-bg', <<<CSS
     from, 99% {
       opacity: 0;
+    }
 CSS
    );
 ?>
 .fade-in .multi-display .upper .elbo-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 */
+/* 0.0 to 0.875 s */
 <?php
+  /* hide up to 0.86625 s */
   Mixins::keyframes('elbo', <<<CSS
-    from {
+    from, 99% {
-      opacity: 0;
-    }
-% {
       opacity: 0;
+    }
 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
+  /* up to 0.99 s */
   Mixins::keyframes('elbo-border', <<<CSS
-    from {
+    from, 99% {
-      opacity: 0;
-    }
-    /* 0.99 s */
-% {
       opacity: 0;
+    }
 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
+  /* hide up to 1.11375 s */
   Mixins::keyframes('content', <<<CSS
-    from {
+    from, 99% {
-      opacity: 0;
-    }
-% {
       opacity: 0;
+    }
 CSS
    );
 ?>
 .fade-in .multi-display .upper .content,
 .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 @ 70 - Rev 175 → 184