]> BookStack Code Mirror - bookstack/blob - resources/sass/_animations.scss
f1aa3139b8ea7aff9f01088d8a680584b483e9c1
[bookstack] / 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 }