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

   1
   2 .anim.fadeIn {
   3   opacity: 0;
   4   animation-name: fadeIn;
   5   animation-duration: 120ms;
   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 .search-suggestions-animation{
  20   animation-name: searchSuggestions;
  21   animation-duration: 120ms;
  22   animation-fill-mode: forwards;
  23   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
  24 }
  25
  26 @keyframes searchSuggestions {
  27   0% {
  28     opacity: .5;
  29     transform: scale(0.9);
  30   }
  31   100% {
  32     opacity: 1;
  33     transform: scale(1);
  34   }
  35 }
  36
  37 @keyframes loadingBob {
  38   0% {
  39     transform: translate3d(0, 0, 0);
  40   }
  41   30% {
  42     transform: translate3d(0, 0, 0);
  43   }
  44   50% {
  45     transform: translate3d(0, -10px, 0);
  46   }
  47   70% {
  48     transform: translate3d(0, 0, 0);
  49   }
  50   100% {
  51     transform: translate3d(0, 0, 0);
  52   }
  53 }
  54
  55 @keyframes pointer {
  56   0% {
  57       transform: translate3d(0, 20px, 0) scale3d(0, 0, 0);
  58   }
  59   100% {
  60       transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  61   }
  62 }
  63
  64 .anim.pointer {
  65   transform-origin: 50% 100%;
  66   animation-name: pointer;
  67   animation-duration: 180ms;
  68   animation-delay: 0s;
  69   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
  70 }
  71
  72 @keyframes highlight {
  73   0% {
  74     background-color: var(--color-primary-light);
  75   }
  76   33% {
  77     background-color: transparent;
  78   }
  79   66% {
  80     background-color: var(--color-primary-light);
  81   }
  82   100% {
  83     background-color: transparent;
  84   }
  85 }
  86
  87 .anim-highlight {
  88   animation-name: highlight;
  89   animation-duration: 2s;
  90   animation-delay: 0s;
  91   animation-timing-function: linear;
  92 }