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 { opacity: 0;transform: scale3d(0, 0, 1);}
  64
  65   to { opacity: 1; transform: scale3d(1, 1, 1);}
  66 }
  67
  68 .anim.menuIn {
  69   transform-origin: 0% 0%;
  70   animation-name: menuIn;
  71   animation-duration: 120ms;
  72   animation-delay: 0s;
  73   animation-timing-function: cubic-bezier(.62,.28,.23,.99);
  74 }