pyc-website

main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
animation.less

(1922B)
      1 /***************************************
      2  * Animations
      3  ***************************************/
      4 
      5 .ease-inout-transition(@t) {
      6 	-webkit-transition: all ease-in-out @t;
      7     -moz-transition: all ease-in-out @t;
      8     -o-transition: all ease-in-out @t;
      9     transition: all ease-in-out @t;
     10 }
     11 
     12 //
     13 // Ng Hide
     14 //
     15 .animate-showhide.ng-hide-add, 
     16 .animate-showhide.ng-hide-remove {
     17     display: block !important;
     18     .ease-inout-transition(0.25s);
     19     &.one { .ease-inout-transition(1.2s); }
     20     &.two { .ease-inout-transition(1.6s); }
     21 }
     22 
     23 .animate-showhide.ng-hide-add.ng-hide-add-active,
     24 .animate-showhide.ng-hide-remove {
     25     opacity: 0;
     26 }
     27 
     28 .animate-showhide.ng-hide-add,
     29 .animate-showhide.ng-hide-remove.ng-hide-remove-active {
     30     opacity: 1;
     31 }
     32 
     33 
     34 
     35 @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
     36 @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
     37 @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
     38  
     39 .fade-in {
     40     opacity:0;  /* make things invisible upon start */
     41     -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
     42     -moz-animation:fadeIn ease-in 1;
     43     animation:fadeIn ease-in 1;
     44  
     45     -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
     46     -moz-animation-fill-mode:forwards;
     47     animation-fill-mode:forwards;
     48  
     49     -webkit-animation-duration:1s;
     50     -moz-animation-duration:1s;
     51     animation-duration:1s;
     52 }
     53 
     54 .fade-in.fast {
     55 -webkit-animation-delay: 0.1s;
     56 -moz-animation-delay: 0.1s;
     57 animation-delay: 0.1s;
     58 }
     59  
     60 .fade-in.one {
     61 -webkit-animation-delay: 0.7s;
     62 -moz-animation-delay: 0.7s;
     63 animation-delay: 0.7s;
     64 }
     65  
     66 .fade-in.two {
     67 -webkit-animation-delay: 1.35s;
     68 -moz-animation-delay:1.35s;
     69 animation-delay: 1.35s;
     70 }
     71  
     72 .fade-in.three {
     73 -webkit-animation-delay: 1.6s;
     74 -moz-animation-delay: 1.6s;
     75 animation-delay: 1.6s;
     76 }