]> BookStack Code Mirror - bookstack/blob - resources/sass/_animations.scss
Applied StyleCI changes, added php/larastan to attribution
[bookstack] / resources / sass / _animations.scss
1
2 .anim.fadeIn {
3   opacity: 0;
4   animation-name: fadeIn;
5   animation-duration: 180ms;
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 @keyframes loadingBob {
40   0% {
41     transform: translate3d(0, 0, 0);
42   }
43   30% {
44     transform: translate3d(0, 0, 0);
45   }
46   50% {
47     transform: translate3d(0, -10px, 0);
48   }
49   70% {
50     transform: translate3d(0, 0, 0);
51   }
52   100% {
53     transform: translate3d(0, 0, 0);
54   }
55 }
56
57 @keyframes pointer {
58   0% {
59       transform: translate3d(0, 20px, 0) scale3d(0, 0, 0);
60   }
61   100% {
62       transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
63   }
64 }
65
66 .anim.pointer {
67   transform-origin: 50% 100%;
68   animation-name: pointer;
69   animation-duration: 180ms;
70   animation-delay: 0s;
71   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
72 }
Morty Proxy This is a proxified and sanitized view of the page, visit original site.