BookStack Code Mirror - bookstack/blob - resources/assets/sass/_animations.scss

   1
   2 .anim.fadeIn {
   3   opacity: 0;
   4   animation-name: fadeIn;
   5   animation-duration: 160ms;
   6   animation-timing-function: ease-in-out;
   7   animation-fill-mode: forwards;
   8 }
   9
  10 @keyframes fadeIn {
  11   0% {
  12     opacity: 0;
  13   }
  14   100% {
  15     opacity: 1;
  16   }
  17 }
  18
  19 .anim.searchResult {
  20   opacity: 0;
  21   transform: translate3d(580px, 0, 0);
  22   animation-name: searchResult;
  23   animation-duration: 220ms;
  24   animation-fill-mode: forwards;
  25   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
  26 }
  27
  28 @keyframes searchResult {
  29   0% {
  30     opacity: 0;
  31     transform: translate3d(400px, 0, 0);
  32   }
  33   100% {
  34     opacity: 1;
  35     transform: translate3d(0, 0, 0);
  36   }
  37 }
  38
  39 .anim.notification {
  40   transform: translate3d(580px, 0, 0);
  41   animation-name: notification;
  42   animation-duration: 3s;
  43   animation-timing-function: ease-in-out;
  44   animation-fill-mode: forwards;
  45 }
  46
  47 @keyframes notification {
  48   0% {
  49     transform: translate3d(580px, 0, 0);
  50   }
  51   10% {
  52     transform: translate3d(0, 0, 0);
  53   }
  54   90% {
  55     transform: translate3d(0, 0, 0);
  56   }
  57   100% {
  58     transform: translate3d(580px, 0, 0);
  59   }
  60 }
  61
  62 @keyframes menuIn {
  63   from {
  64     opacity: 0;
  65     transform: scale3d(0, 0, 1);
  66   }
  67
  68   to {
  69     opacity: 1;
  70     transform: scale3d(1, 1, 1);
  71   }
  72 }
  73
  74 .anim.menuIn {
  75   transform-origin: 100% 0%;
  76   animation-name: menuIn;
  77   animation-duration: 120ms;
  78   animation-delay: 0s;
  79   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
  80 }
  81
  82 @keyframes loadingBob {
  83   0% {
  84     transform: translate3d(0, 0, 0);
  85   }
  86   30% {
  87     transform: translate3d(0, 0, 0);
  88   }
  89   50% {
  90     transform: translate3d(0, -10px, 0);
  91   }
  92   70% {
  93     transform: translate3d(0, 0, 0);
  94   }
  95   100% {
  96     transform: translate3d(0, 0, 0);
  97   }
  98 }