-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathtransitions.css
103 lines (101 loc) · 2.86 KB
/
transitions.css
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
/* Fade */
.tooltip.fade { opacity: 0; transition: opacity 200ms ease-out; }
.tooltip.fade.in { opacity: 1; transition-duration: 100ms; }
/* Slide */
.tooltip.slide {
opacity: 0;
transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
}
.tooltip.slide.top,
.tooltip.slide.top-left,
.tooltip.slide.top-right {
-webkit-transform: translateY(15px);
transform: translateY(15px);
}
.tooltip.slide.bottom,
.tooltip.slide.bottom-left,
.tooltip.slide.bottom-right {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
.tooltip.slide.left,
.tooltip.slide.left-top,
.tooltip.slide.left-bottom {
-webkit-transform: translateX(15px);
transform: translateX(15px);
}
.tooltip.slide.right,
.tooltip.slide.right-top,
.tooltip.slide.right-bottom {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
.tooltip.slide.in {
opacity: 1;
-webkit-transform: none;
transform: none;
transition-duration: 100ms;
}
/* Grow */
.tooltip.grow {
-webkit-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.tooltip.grow.top {
-webkit-transform: translateY(60%) scale(0);
transform: translateY(60%) scale(0);
}
.tooltip.grow.top-left {
-webkit-transform: translateY(60%) translateX(40%) scale(0);
transform: translateY(60%) translateX(40%) scale(0);
}
.tooltip.grow.top-right {
-webkit-transform: translateY(60%) translateX(-40%) scale(0);
transform: translateY(60%) translateX(-40%) scale(0);
}
.tooltip.grow.bottom {
-webkit-transform: translateY(-60%) scale(0);
transform: translateY(-60%) scale(0);
}
.tooltip.grow.bottom-left {
-webkit-transform: translateY(-60%) translateX(40%) scale(0);
transform: translateY(-60%) translateX(40%) scale(0);
}
.tooltip.grow.bottom-right {
-webkit-transform: translateY(-60%) translateX(-40%) scale(0);
transform: translateY(-60%) translateX(-40%) scale(0);
}
.tooltip.grow.left {
-webkit-transform: translateX(53%) scale(0);
transform: translateX(53%) scale(0);
}
.tooltip.grow.left-top {
-webkit-transform: translateX(53%) translateY(40%) scale(0);
transform: translateX(53%) translateY(40%) scale(0);
}
.tooltip.grow.left-bottom {
-webkit-transform: translateX(53%) translateY(-40%) scale(0);
transform: translateX(53%) translateY(-40%) scale(0);
}
.tooltip.grow.right {
-webkit-transform: translateX(-53%) scale(0);
transform: translateX(-53%) scale(0);
}
.tooltip.grow.right-top {
-webkit-transform: translateX(-53%) translateY(40%) scale(0);
transform: translateX(-53%) translateY(40%) scale(0);
}
.tooltip.grow.right-bottom {
-webkit-transform: translateX(-53%) translateY(-40%) scale(0);
transform: translateX(-53%) translateY(-40%) scale(0);
}
.tooltip.grow.in {
-webkit-transform: none;
transform: none;
transition-duration: 100ms;
}