1 | @mixin timing-function {
|
2 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
3 | }
|
4 |
|
5 | @keyframes #{$rt-namespace}__bounceInRight {
|
6 | from,
|
7 | 60%,
|
8 | 75%,
|
9 | 90%,
|
10 | to {
|
11 | @include timing-function;
|
12 | }
|
13 | from {
|
14 | opacity: 0;
|
15 | transform: translate3d(3000px, 0, 0);
|
16 | }
|
17 | 60% {
|
18 | opacity: 1;
|
19 | transform: translate3d(-25px, 0, 0);
|
20 | }
|
21 | 75% {
|
22 | transform: translate3d(10px, 0, 0);
|
23 | }
|
24 | 90% {
|
25 | transform: translate3d(-5px, 0, 0);
|
26 | }
|
27 | to {
|
28 | transform: none;
|
29 | }
|
30 | }
|
31 |
|
32 | @keyframes #{$rt-namespace}__bounceOutRight {
|
33 | 20% {
|
34 | opacity: 1;
|
35 | transform: translate3d(-20px, 0, 0);
|
36 | }
|
37 | to {
|
38 | opacity: 0;
|
39 | transform: translate3d(2000px, 0, 0);
|
40 | }
|
41 | }
|
42 |
|
43 | @keyframes #{$rt-namespace}__bounceInLeft {
|
44 | from,
|
45 | 60%,
|
46 | 75%,
|
47 | 90%,
|
48 | to {
|
49 | @include timing-function;
|
50 | }
|
51 | 0% {
|
52 | opacity: 0;
|
53 | transform: translate3d(-3000px, 0, 0);
|
54 | }
|
55 | 60% {
|
56 | opacity: 1;
|
57 | transform: translate3d(25px, 0, 0);
|
58 | }
|
59 | 75% {
|
60 | transform: translate3d(-10px, 0, 0);
|
61 | }
|
62 | 90% {
|
63 | transform: translate3d(5px, 0, 0);
|
64 | }
|
65 | to {
|
66 | transform: none;
|
67 | }
|
68 | }
|
69 |
|
70 | @keyframes #{$rt-namespace}__bounceOutLeft {
|
71 | 20% {
|
72 | opacity: 1;
|
73 | transform: translate3d(20px, 0, 0);
|
74 | }
|
75 | to {
|
76 | opacity: 0;
|
77 | transform: translate3d(-2000px, 0, 0);
|
78 | }
|
79 | }
|
80 |
|
81 | @keyframes #{$rt-namespace}__bounceInUp {
|
82 | from,
|
83 | 60%,
|
84 | 75%,
|
85 | 90%,
|
86 | to {
|
87 | @include timing-function;
|
88 | }
|
89 | from {
|
90 | opacity: 0;
|
91 | transform: translate3d(0, 3000px, 0);
|
92 | }
|
93 | 60% {
|
94 | opacity: 1;
|
95 | transform: translate3d(0, -20px, 0);
|
96 | }
|
97 | 75% {
|
98 | transform: translate3d(0, 10px, 0);
|
99 | }
|
100 | 90% {
|
101 | transform: translate3d(0, -5px, 0);
|
102 | }
|
103 | to {
|
104 | transform: translate3d(0, 0, 0);
|
105 | }
|
106 | }
|
107 |
|
108 | @keyframes #{$rt-namespace}__bounceOutUp {
|
109 | 20% {
|
110 | transform: translate3d(0, -10px, 0);
|
111 | }
|
112 | 40%,
|
113 | 45% {
|
114 | opacity: 1;
|
115 | transform: translate3d(0, 20px, 0);
|
116 | }
|
117 | to {
|
118 | opacity: 0;
|
119 | transform: translate3d(0, -2000px, 0);
|
120 | }
|
121 | }
|
122 |
|
123 | @keyframes #{$rt-namespace}__bounceInDown {
|
124 | from,
|
125 | 60%,
|
126 | 75%,
|
127 | 90%,
|
128 | to {
|
129 | @include timing-function;
|
130 | }
|
131 | 0% {
|
132 | opacity: 0;
|
133 | transform: translate3d(0, -3000px, 0);
|
134 | }
|
135 | 60% {
|
136 | opacity: 1;
|
137 | transform: translate3d(0, 25px, 0);
|
138 | }
|
139 | 75% {
|
140 | transform: translate3d(0, -10px, 0);
|
141 | }
|
142 | 90% {
|
143 | transform: translate3d(0, 5px, 0);
|
144 | }
|
145 | to {
|
146 | transform: none;
|
147 | }
|
148 | }
|
149 |
|
150 | @keyframes #{$rt-namespace}__bounceOutDown {
|
151 | 20% {
|
152 | transform: translate3d(0, 10px, 0);
|
153 | }
|
154 | 40%,
|
155 | 45% {
|
156 | opacity: 1;
|
157 | transform: translate3d(0, -20px, 0);
|
158 | }
|
159 | to {
|
160 | opacity: 0;
|
161 | transform: translate3d(0, 2000px, 0);
|
162 | }
|
163 | }
|
164 |
|
165 | .#{$rt-namespace}__bounce-enter {
|
166 | &--top-left,
|
167 | &--bottom-left {
|
168 | animation-name: #{$rt-namespace}__bounceInLeft;
|
169 | }
|
170 | &--top-right,
|
171 | &--bottom-right {
|
172 | animation-name: #{$rt-namespace}__bounceInRight;
|
173 | }
|
174 | &--top-center {
|
175 | animation-name: #{$rt-namespace}__bounceInDown;
|
176 | }
|
177 | &--bottom-center {
|
178 | animation-name: #{$rt-namespace}__bounceInUp;
|
179 | }
|
180 | }
|
181 |
|
182 | .#{$rt-namespace}__bounce-exit {
|
183 | &--top-left,
|
184 | &--bottom-left {
|
185 | animation-name: #{$rt-namespace}__bounceOutLeft;
|
186 | }
|
187 | &--top-right,
|
188 | &--bottom-right {
|
189 | animation-name: #{$rt-namespace}__bounceOutRight;
|
190 | }
|
191 | &--top-center {
|
192 | animation-name: #{$rt-namespace}__bounceOutUp;
|
193 | }
|
194 | &--bottom-center {
|
195 | animation-name: #{$rt-namespace}__bounceOutDown;
|
196 | }
|
197 | } |
\ | No newline at end of file |