-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
style.scss
43 lines (38 loc) · 926 Bytes
/
style.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.components-animate__appear {
animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
animation-fill-mode: forwards;
&.is-from-top,
&.is-from-top.is-from-left {
transform-origin: top left;
}
&.is-from-top.is-from-right {
transform-origin: top right;
}
&.is-from-bottom,
&.is-from-bottom.is-from-left {
transform-origin: bottom left;
}
&.is-from-bottom.is-from-right {
transform-origin: bottom right;
}
}
@keyframes components-animate__appear-animation {
from {
transform: translateY(-2em) scaleY(0) scaleX(0);
}
to {
transform: translateY(0%) scaleY(1) scaleX(1);
}
}
.components-animate__slide-in {
animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
animation-fill-mode: forwards;
&.is-from-left {
transform: translateX(+100%);
}
}
@keyframes components-animate__slide-in-animation {
100% {
transform: translateX(0%);
}
}