1 | @keyframes #{$rt-namespace}__flipIn {
|
2 | from {
|
3 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
4 | animation-timing-function: ease-in;
|
5 | opacity: 0;
|
6 | }
|
7 | 40% {
|
8 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
9 | animation-timing-function: ease-in;
|
10 | }
|
11 | 60% {
|
12 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
13 | opacity: 1
|
14 | }
|
15 | 80% {
|
16 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
17 | }
|
18 | to {
|
19 | transform: perspective(400px);
|
20 | }
|
21 | }
|
22 |
|
23 | @keyframes #{$rt-namespace}__flipOut {
|
24 | from {
|
25 | transform: perspective(400px);
|
26 | }
|
27 | 30% {
|
28 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
29 | opacity: 1
|
30 | }
|
31 | to {
|
32 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
33 | opacity: 0
|
34 | }
|
35 | }
|
36 |
|
37 | .#{$rt-namespace}__flip-enter {
|
38 | animation-name: #{$rt-namespace}__flipIn;
|
39 | }
|
40 |
|
41 | .#{$rt-namespace}__flip-exit {
|
42 | animation-name: #{$rt-namespace}__flipOut;
|
43 | }
|