BookStack Code Mirror - bookstack/blob - resources/assets/sass/

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 }

10 @keyframes fadeIn {

11 0% {

12 opacity: 0;

13 }

14 100% {

15 opacity: 1;

16 }

17 }

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 }

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 }

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 &.stopped {

46 animation-name: notificationStopped;

47 }

48 }

50 @keyframes notification {

51 0% {

52 transform: translate3d(580px, 0, 0);

53 }

54 10% {

55 transform: translate3d(0, 0, 0);

56 }

57 90% {

58 transform: translate3d(0, 0, 0);

59 }

60 100% {

61 transform: translate3d(580px, 0, 0);

62 }

63 }

64 @keyframes notificationStopped {

65 0% {

66 transform: translate3d(580px, 0, 0);

67 }

68 10% {

69 transform: translate3d(0, 0, 0);

70 }

71 100% {

72 transform: translate3d(0, 0, 0);

73 }

74 }

76 @keyframes menuIn {

77 from {

78 opacity: 0;

79 transform: scale3d(0, 0, 1);

80 }

82 to {

83 opacity: 1;

84 transform: scale3d(1, 1, 1);

85 }

86 }

88 .anim.menuIn {

89 transform-origin: 100% 0%;

90 animation-name: menuIn;

91 animation-duration: 120ms;

92 animation-delay: 0s;

93 animation-timing-function: cubic-bezier(.62, .28, .23, .99);

94 }

96 @keyframes loadingBob {

97 0% {

98 transform: translate3d(0, 0, 0);

99 }

100 30% {

101 transform: translate3d(0, 0, 0);

102 }

103 50% {

104 transform: translate3d(0, -10px, 0);

105 }

106 70% {

107 transform: translate3d(0, 0, 0);

108 }

109 100% {

110 transform: translate3d(0, 0, 0);

111 }

112 }

113

114 @keyframes pointer {

115 0% {

116 transform: translate3d(0, 20px, 0) scale3d(0, 0, 0);

117 }

118 100% {

119 transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

120 }

121 }

122

123 .anim.pointer {

124 transform-origin: 50% 100%;

125 animation-name: pointer;

126 animation-duration: 180ms;

127 animation-delay: 0s;

128 animation-timing-function: cubic-bezier(.62, .28, .23, .99);

129 }