fomantic-ui 2.9.1-beta.28 → 2.9.1-beta.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +0 -1
- package/.github/workflows/ci.yml +6 -0
- package/.prettierrc.js +12 -0
- package/.stylelintrc.js +13 -7
- package/README.md +1 -1
- package/dist/components/accordion.css +9 -21
- package/dist/components/accordion.js +3 -3
- package/dist/components/accordion.min.css +2 -2
- package/dist/components/accordion.min.js +2 -2
- package/dist/components/ad.css +2 -3
- package/dist/components/ad.min.css +2 -2
- package/dist/components/api.js +3 -3
- package/dist/components/api.min.js +2 -2
- package/dist/components/breadcrumb.css +1 -1
- package/dist/components/breadcrumb.min.css +1 -1
- package/dist/components/button.css +336 -713
- package/dist/components/button.min.css +2 -2
- package/dist/components/calendar.css +5 -10
- package/dist/components/calendar.js +3 -3
- package/dist/components/calendar.min.css +2 -2
- package/dist/components/calendar.min.js +2 -2
- package/dist/components/card.css +88 -201
- package/dist/components/card.min.css +2 -2
- package/dist/components/checkbox.css +35 -86
- package/dist/components/checkbox.js +3 -3
- package/dist/components/checkbox.min.css +2 -2
- package/dist/components/checkbox.min.js +2 -2
- package/dist/components/comment.css +4 -8
- package/dist/components/comment.min.css +2 -2
- package/dist/components/container.css +1 -1
- package/dist/components/container.min.css +1 -1
- package/dist/components/dimmer.css +20 -129
- package/dist/components/dimmer.js +3 -3
- package/dist/components/dimmer.min.css +2 -2
- package/dist/components/dimmer.min.js +2 -2
- package/dist/components/divider.css +3 -6
- package/dist/components/divider.min.css +2 -2
- package/dist/components/dropdown.css +51 -149
- package/dist/components/dropdown.js +13 -7
- package/dist/components/dropdown.min.css +2 -2
- package/dist/components/dropdown.min.js +2 -2
- package/dist/components/embed.css +2 -7
- package/dist/components/embed.js +3 -3
- package/dist/components/embed.min.css +2 -2
- package/dist/components/embed.min.js +2 -2
- package/dist/components/emoji.css +1 -2
- package/dist/components/emoji.min.css +1 -1
- package/dist/components/feed.css +7 -21
- package/dist/components/feed.min.css +2 -2
- package/dist/components/flag.css +1 -1
- package/dist/components/flag.min.css +1 -1
- package/dist/components/flyout.css +30 -71
- package/dist/components/flyout.js +3 -16
- package/dist/components/flyout.min.css +2 -2
- package/dist/components/flyout.min.js +2 -2
- package/dist/components/form.css +32 -101
- package/dist/components/form.js +3 -3
- package/dist/components/form.min.css +2 -2
- package/dist/components/form.min.js +2 -2
- package/dist/components/grid.css +72 -182
- package/dist/components/grid.min.css +2 -2
- package/dist/components/header.css +5 -11
- package/dist/components/header.min.css +2 -2
- package/dist/components/icon.css +37 -74
- package/dist/components/icon.min.css +2 -2
- package/dist/components/image.css +8 -21
- package/dist/components/image.min.css +2 -2
- package/dist/components/input.css +15 -50
- package/dist/components/input.min.css +2 -2
- package/dist/components/item.css +13 -38
- package/dist/components/item.min.css +2 -2
- package/dist/components/label.css +18 -45
- package/dist/components/label.min.css +2 -2
- package/dist/components/list.css +1 -7
- package/dist/components/list.min.css +2 -2
- package/dist/components/loader.css +21 -103
- package/dist/components/loader.min.css +2 -2
- package/dist/components/menu.css +49 -145
- package/dist/components/menu.min.css +1 -1
- package/dist/components/message.css +50 -114
- package/dist/components/message.min.css +2 -2
- package/dist/components/modal.css +20 -54
- package/dist/components/modal.js +3 -11
- package/dist/components/modal.min.css +2 -2
- package/dist/components/modal.min.js +2 -2
- package/dist/components/nag.css +2 -5
- package/dist/components/nag.js +3 -3
- package/dist/components/nag.min.css +2 -2
- package/dist/components/nag.min.js +2 -2
- package/dist/components/placeholder.css +7 -25
- package/dist/components/placeholder.min.css +2 -2
- package/dist/components/popup.css +68 -139
- package/dist/components/popup.js +16 -7
- package/dist/components/popup.min.css +2 -2
- package/dist/components/popup.min.js +2 -2
- package/dist/components/progress.css +25 -120
- package/dist/components/progress.js +3 -3
- package/dist/components/progress.min.css +2 -2
- package/dist/components/progress.min.js +2 -2
- package/dist/components/rail.css +1 -1
- package/dist/components/rail.min.css +1 -1
- package/dist/components/rating.css +2 -39
- package/dist/components/rating.js +3 -3
- package/dist/components/rating.min.css +2 -2
- package/dist/components/rating.min.js +2 -2
- package/dist/components/reset.css +6 -11
- package/dist/components/reset.min.css +2 -2
- package/dist/components/reveal.css +26 -58
- package/dist/components/reveal.min.css +2 -2
- package/dist/components/search.css +8 -22
- package/dist/components/search.js +3 -3
- package/dist/components/search.min.css +2 -2
- package/dist/components/search.min.js +2 -2
- package/dist/components/segment.css +32 -89
- package/dist/components/segment.min.css +2 -2
- package/dist/components/shape.css +4 -16
- package/dist/components/shape.js +3 -15
- package/dist/components/shape.min.css +2 -2
- package/dist/components/shape.min.js +2 -2
- package/dist/components/sidebar.css +59 -147
- package/dist/components/sidebar.js +3 -16
- package/dist/components/sidebar.min.css +2 -2
- package/dist/components/sidebar.min.js +2 -2
- package/dist/components/site.css +1 -14
- package/dist/components/site.js +11 -38
- package/dist/components/site.min.css +2 -2
- package/dist/components/site.min.js +2 -2
- package/dist/components/slider.css +8 -26
- package/dist/components/slider.js +3 -3
- package/dist/components/slider.min.css +1 -1
- package/dist/components/slider.min.js +2 -2
- package/dist/components/state.js +3 -3
- package/dist/components/state.min.js +2 -2
- package/dist/components/statistic.css +11 -43
- package/dist/components/statistic.min.css +2 -2
- package/dist/components/step.css +26 -89
- package/dist/components/step.min.css +2 -2
- package/dist/components/sticky.css +1 -5
- package/dist/components/sticky.js +3 -11
- package/dist/components/sticky.min.css +2 -2
- package/dist/components/sticky.min.js +2 -2
- package/dist/components/tab.css +3 -5
- package/dist/components/tab.js +3 -3
- package/dist/components/tab.min.css +2 -2
- package/dist/components/tab.min.js +2 -2
- package/dist/components/table.css +202 -409
- package/dist/components/table.min.css +2 -2
- package/dist/components/text.css +1 -1
- package/dist/components/text.min.css +1 -1
- package/dist/components/toast.css +32 -108
- package/dist/components/toast.js +3 -3
- package/dist/components/toast.min.css +2 -2
- package/dist/components/toast.min.js +2 -2
- package/dist/components/transition.css +264 -1312
- package/dist/components/transition.js +3 -3
- package/dist/components/transition.min.css +2 -2
- package/dist/components/transition.min.js +2 -2
- package/dist/components/visibility.js +3 -11
- package/dist/components/visibility.min.js +2 -2
- package/dist/semantic.css +51 -3547
- package/dist/semantic.js +107 -181
- package/dist/semantic.min.css +2 -2
- package/dist/semantic.min.js +2 -2
- package/examples/fixed.html +1 -1
- package/examples/grid.html +1 -1
- package/package.json +2 -2
- package/src/definitions/behaviors/api.js +2 -2
- package/src/definitions/behaviors/form.js +2 -2
- package/src/definitions/behaviors/state.js +2 -2
- package/src/definitions/behaviors/visibility.js +2 -10
- package/src/definitions/collections/table.less +4 -0
- package/src/definitions/elements/button.less +7 -2
- package/src/definitions/elements/icon.less +2 -3
- package/src/definitions/elements/image.less +0 -4
- package/src/definitions/elements/loader.less +2 -0
- package/src/definitions/elements/segment.less +3 -1
- package/src/definitions/globals/site.js +10 -37
- package/src/definitions/modules/accordion.js +2 -2
- package/src/definitions/modules/calendar.js +2 -2
- package/src/definitions/modules/checkbox.js +2 -2
- package/src/definitions/modules/dimmer.js +2 -2
- package/src/definitions/modules/dimmer.less +2 -10
- package/src/definitions/modules/dropdown.js +12 -6
- package/src/definitions/modules/dropdown.less +1 -4
- package/src/definitions/modules/embed.js +2 -2
- package/src/definitions/modules/flyout.js +2 -15
- package/src/definitions/modules/flyout.less +0 -1
- package/src/definitions/modules/modal.js +2 -10
- package/src/definitions/modules/modal.less +0 -2
- package/src/definitions/modules/nag.js +2 -2
- package/src/definitions/modules/popup.js +15 -6
- package/src/definitions/modules/popup.less +2 -0
- package/src/definitions/modules/progress.js +2 -2
- package/src/definitions/modules/rating.js +2 -2
- package/src/definitions/modules/rating.less +2 -4
- package/src/definitions/modules/search.js +2 -2
- package/src/definitions/modules/search.less +0 -1
- package/src/definitions/modules/shape.js +2 -14
- package/src/definitions/modules/sidebar.js +2 -15
- package/src/definitions/modules/sidebar.less +0 -1
- package/src/definitions/modules/slider.js +2 -2
- package/src/definitions/modules/sticky.js +2 -10
- package/src/definitions/modules/sticky.less +0 -7
- package/src/definitions/modules/tab.js +2 -2
- package/src/definitions/modules/toast.js +2 -2
- package/src/definitions/modules/toast.less +3 -1
- package/src/definitions/modules/transition.js +2 -2
- package/src/definitions/views/card.less +4 -15
- package/src/semantic.less +6 -6
- package/src/themes/amazon/elements/button.variables +4 -9
- package/src/themes/bootstrap3/elements/button.variables +3 -7
- package/src/themes/classic/elements/button.variables +6 -12
- package/src/themes/classic/views/card.overrides +2 -4
- package/src/themes/colored/modules/checkbox.variables +1 -3
- package/src/themes/default/collections/form.variables +1 -2
- package/src/themes/default/collections/menu.variables +2 -4
- package/src/themes/default/collections/message.variables +38 -76
- package/src/themes/default/collections/table.variables +2 -4
- package/src/themes/default/elements/button.variables +6 -12
- package/src/themes/default/elements/flag.variables +3 -3
- package/src/themes/default/elements/icon.variables +5 -10
- package/src/themes/default/elements/input.variables +1 -2
- package/src/themes/default/elements/list.variables +3 -7
- package/src/themes/default/elements/placeholder.variables +12 -8
- package/src/themes/default/elements/segment.variables +5 -6
- package/src/themes/default/elements/step.variables +1 -2
- package/src/themes/default/globals/site.variables +41 -83
- package/src/themes/default/modules/accordion.variables +4 -8
- package/src/themes/default/modules/checkbox.variables +4 -8
- package/src/themes/default/modules/dimmer.variables +1 -3
- package/src/themes/default/modules/dropdown.variables +1 -2
- package/src/themes/default/modules/embed.variables +2 -5
- package/src/themes/default/modules/modal.variables +3 -6
- package/src/themes/default/modules/progress.variables +1 -2
- package/src/themes/default/modules/rating.variables +1 -2
- package/src/themes/default/modules/search.variables +3 -6
- package/src/themes/default/modules/shape.variables +1 -2
- package/src/themes/default/modules/slider.variables +3 -1
- package/src/themes/default/views/card.variables +8 -18
- package/src/themes/github/collections/form.variables +1 -2
- package/src/themes/github/collections/menu.variables +1 -2
- package/src/themes/github/collections/message.variables +2 -4
- package/src/themes/github/elements/button.variables +4 -8
- package/src/themes/github/elements/input.variables +1 -2
- package/src/themes/github/modules/dropdown.variables +1 -3
- package/src/themes/material/elements/button.variables +2 -4
- package/src/themes/material/elements/icon.variables +1 -2
- package/src/themes/pulsar/elements/loader.overrides +0 -38
- package/src/themes/raised/elements/button.variables +1 -2
- package/src/themes/round/elements/button.variables +1 -3
- package/src/themes/striped/modules/progress.overrides +11 -11
- package/tasks/README.md +2 -2
- package/tasks/admin/components/create.js +2 -2
- package/tasks/build/assets.js +1 -1
- package/tasks/build/css.js +1 -1
- package/tasks/build/javascript.js +1 -1
- package/tasks/build.js +2 -2
- package/tasks/collections/docs.js +1 -1
- package/tasks/collections/install.js +2 -2
- package/tasks/collections/various.js +1 -1
- package/tasks/config/admin/release.js +5 -5
- package/tasks/config/admin/templates/README.md +8 -8
- package/tasks/config/admin/templates/bower.json +3 -2
- package/tasks/config/admin/templates/component-package.js +3 -3
- package/tasks/config/admin/templates/package.json +5 -5
- package/tasks/config/tasks.js +15 -11
- package/tasks/docs/build.js +2 -2
- package/tasks/install.js +2 -3
- package/tasks/watch.js +1 -1
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* # Fomantic-UI 2.9.1-beta.
|
2
|
+
* # Fomantic-UI 2.9.1-beta.29+70adac5 - Transition
|
3
3
|
* https://github.com/fomantic/Fomantic-UI/
|
4
4
|
*
|
5
5
|
*
|
@@ -14,14 +14,10 @@
|
|
14
14
|
*******************************/
|
15
15
|
|
16
16
|
.transition {
|
17
|
-
|
18
|
-
|
19
|
-
-
|
20
|
-
|
21
|
-
-webkit-animation-timing-function: ease;
|
22
|
-
animation-timing-function: ease;
|
23
|
-
-webkit-animation-fill-mode: both;
|
24
|
-
animation-fill-mode: both;
|
17
|
+
animation-iteration-count: 1;
|
18
|
+
animation-duration: 300ms;
|
19
|
+
animation-timing-function: ease;
|
20
|
+
animation-fill-mode: both;
|
25
21
|
}
|
26
22
|
|
27
23
|
|
@@ -61,8 +57,7 @@
|
|
61
57
|
|
62
58
|
/* Disabled */
|
63
59
|
.disabled.transition {
|
64
|
-
|
65
|
-
animation-play-state: paused;
|
60
|
+
animation-play-state: paused;
|
66
61
|
}
|
67
62
|
|
68
63
|
|
@@ -71,154 +66,112 @@
|
|
71
66
|
*******************************/
|
72
67
|
|
73
68
|
.looping.transition {
|
74
|
-
|
75
|
-
animation-iteration-count: infinite;
|
69
|
+
animation-iteration-count: infinite;
|
76
70
|
}
|
77
71
|
|
78
72
|
/* Pulsating */
|
79
73
|
.pulsating.transition {
|
80
|
-
|
81
|
-
|
82
|
-
-
|
83
|
-
animation-duration: 2000ms;
|
84
|
-
-webkit-box-shadow: 0 0 0 0 rgba(128, 128, 128, 0.5);
|
85
|
-
box-shadow: 0 0 0 0 rgba(128, 128, 128, 0.5);
|
74
|
+
animation-name: pulsating;
|
75
|
+
animation-duration: 2000ms;
|
76
|
+
box-shadow: 0 0 0 0 rgba(128, 128, 128, 0.5);
|
86
77
|
}
|
87
78
|
.inverted.pulsating.transition {
|
88
|
-
|
89
|
-
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
|
90
|
-
}
|
91
|
-
@-webkit-keyframes pulsating {
|
92
|
-
100% {
|
93
|
-
-webkit-box-shadow: 0 0 0 0.8rem rgba(255, 255, 255, 0);
|
94
|
-
box-shadow: 0 0 0 0.8rem rgba(255, 255, 255, 0);
|
95
|
-
}
|
79
|
+
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
|
96
80
|
}
|
97
81
|
@keyframes pulsating {
|
98
82
|
100% {
|
99
|
-
|
100
|
-
box-shadow: 0 0 0 0.8rem rgba(255, 255, 255, 0);
|
83
|
+
box-shadow: 0 0 0 0.8rem rgba(255, 255, 255, 0);
|
101
84
|
}
|
102
85
|
}
|
103
86
|
.primary.pulsating.transition {
|
104
|
-
|
105
|
-
box-shadow: 0 0 0 0 rgba(33, 133, 208, 0.5);
|
87
|
+
box-shadow: 0 0 0 0 rgba(33, 133, 208, 0.5);
|
106
88
|
}
|
107
89
|
.primary.inverted.pulsating.transition {
|
108
|
-
|
109
|
-
box-shadow: 0 0 0 0 rgba(84, 200, 255, 0.7);
|
90
|
+
box-shadow: 0 0 0 0 rgba(84, 200, 255, 0.7);
|
110
91
|
}
|
111
92
|
.secondary.pulsating.transition {
|
112
|
-
|
113
|
-
box-shadow: 0 0 0 0 rgba(27, 28, 29, 0.5);
|
93
|
+
box-shadow: 0 0 0 0 rgba(27, 28, 29, 0.5);
|
114
94
|
}
|
115
95
|
.secondary.inverted.pulsating.transition {
|
116
|
-
|
117
|
-
box-shadow: 0 0 0 0 rgba(84, 84, 84, 0.7);
|
96
|
+
box-shadow: 0 0 0 0 rgba(84, 84, 84, 0.7);
|
118
97
|
}
|
119
98
|
.red.pulsating.transition {
|
120
|
-
|
121
|
-
box-shadow: 0 0 0 0 rgba(219, 40, 40, 0.5);
|
99
|
+
box-shadow: 0 0 0 0 rgba(219, 40, 40, 0.5);
|
122
100
|
}
|
123
101
|
.red.inverted.pulsating.transition {
|
124
|
-
|
125
|
-
box-shadow: 0 0 0 0 rgba(255, 105, 94, 0.7);
|
102
|
+
box-shadow: 0 0 0 0 rgba(255, 105, 94, 0.7);
|
126
103
|
}
|
127
104
|
.orange.pulsating.transition {
|
128
|
-
|
129
|
-
box-shadow: 0 0 0 0 rgba(242, 113, 28, 0.5);
|
105
|
+
box-shadow: 0 0 0 0 rgba(242, 113, 28, 0.5);
|
130
106
|
}
|
131
107
|
.orange.inverted.pulsating.transition {
|
132
|
-
|
133
|
-
box-shadow: 0 0 0 0 rgba(255, 133, 27, 0.7);
|
108
|
+
box-shadow: 0 0 0 0 rgba(255, 133, 27, 0.7);
|
134
109
|
}
|
135
110
|
.yellow.pulsating.transition {
|
136
|
-
|
137
|
-
box-shadow: 0 0 0 0 rgba(251, 189, 8, 0.5);
|
111
|
+
box-shadow: 0 0 0 0 rgba(251, 189, 8, 0.5);
|
138
112
|
}
|
139
113
|
.yellow.inverted.pulsating.transition {
|
140
|
-
|
141
|
-
box-shadow: 0 0 0 0 rgba(255, 226, 31, 0.7);
|
114
|
+
box-shadow: 0 0 0 0 rgba(255, 226, 31, 0.7);
|
142
115
|
}
|
143
116
|
.olive.pulsating.transition {
|
144
|
-
|
145
|
-
box-shadow: 0 0 0 0 rgba(181, 204, 24, 0.5);
|
117
|
+
box-shadow: 0 0 0 0 rgba(181, 204, 24, 0.5);
|
146
118
|
}
|
147
119
|
.olive.inverted.pulsating.transition {
|
148
|
-
|
149
|
-
box-shadow: 0 0 0 0 rgba(217, 231, 120, 0.7);
|
120
|
+
box-shadow: 0 0 0 0 rgba(217, 231, 120, 0.7);
|
150
121
|
}
|
151
122
|
.green.pulsating.transition {
|
152
|
-
|
153
|
-
box-shadow: 0 0 0 0 rgba(33, 186, 69, 0.5);
|
123
|
+
box-shadow: 0 0 0 0 rgba(33, 186, 69, 0.5);
|
154
124
|
}
|
155
125
|
.green.inverted.pulsating.transition {
|
156
|
-
|
157
|
-
box-shadow: 0 0 0 0 rgba(46, 204, 64, 0.7);
|
126
|
+
box-shadow: 0 0 0 0 rgba(46, 204, 64, 0.7);
|
158
127
|
}
|
159
128
|
.teal.pulsating.transition {
|
160
|
-
|
161
|
-
box-shadow: 0 0 0 0 rgba(0, 181, 173, 0.5);
|
129
|
+
box-shadow: 0 0 0 0 rgba(0, 181, 173, 0.5);
|
162
130
|
}
|
163
131
|
.teal.inverted.pulsating.transition {
|
164
|
-
|
165
|
-
box-shadow: 0 0 0 0 rgba(109, 255, 255, 0.7);
|
132
|
+
box-shadow: 0 0 0 0 rgba(109, 255, 255, 0.7);
|
166
133
|
}
|
167
134
|
.blue.pulsating.transition {
|
168
|
-
|
169
|
-
box-shadow: 0 0 0 0 rgba(33, 133, 208, 0.5);
|
135
|
+
box-shadow: 0 0 0 0 rgba(33, 133, 208, 0.5);
|
170
136
|
}
|
171
137
|
.blue.inverted.pulsating.transition {
|
172
|
-
|
173
|
-
box-shadow: 0 0 0 0 rgba(84, 200, 255, 0.7);
|
138
|
+
box-shadow: 0 0 0 0 rgba(84, 200, 255, 0.7);
|
174
139
|
}
|
175
140
|
.violet.pulsating.transition {
|
176
|
-
|
177
|
-
box-shadow: 0 0 0 0 rgba(100, 53, 201, 0.5);
|
141
|
+
box-shadow: 0 0 0 0 rgba(100, 53, 201, 0.5);
|
178
142
|
}
|
179
143
|
.violet.inverted.pulsating.transition {
|
180
|
-
|
181
|
-
box-shadow: 0 0 0 0 rgba(162, 145, 251, 0.7);
|
144
|
+
box-shadow: 0 0 0 0 rgba(162, 145, 251, 0.7);
|
182
145
|
}
|
183
146
|
.purple.pulsating.transition {
|
184
|
-
|
185
|
-
box-shadow: 0 0 0 0 rgba(163, 51, 200, 0.5);
|
147
|
+
box-shadow: 0 0 0 0 rgba(163, 51, 200, 0.5);
|
186
148
|
}
|
187
149
|
.purple.inverted.pulsating.transition {
|
188
|
-
|
189
|
-
box-shadow: 0 0 0 0 rgba(220, 115, 255, 0.7);
|
150
|
+
box-shadow: 0 0 0 0 rgba(220, 115, 255, 0.7);
|
190
151
|
}
|
191
152
|
.pink.pulsating.transition {
|
192
|
-
|
193
|
-
box-shadow: 0 0 0 0 rgba(224, 57, 151, 0.5);
|
153
|
+
box-shadow: 0 0 0 0 rgba(224, 57, 151, 0.5);
|
194
154
|
}
|
195
155
|
.pink.inverted.pulsating.transition {
|
196
|
-
|
197
|
-
box-shadow: 0 0 0 0 rgba(255, 142, 223, 0.7);
|
156
|
+
box-shadow: 0 0 0 0 rgba(255, 142, 223, 0.7);
|
198
157
|
}
|
199
158
|
.brown.pulsating.transition {
|
200
|
-
|
201
|
-
box-shadow: 0 0 0 0 rgba(165, 103, 63, 0.5);
|
159
|
+
box-shadow: 0 0 0 0 rgba(165, 103, 63, 0.5);
|
202
160
|
}
|
203
161
|
.brown.inverted.pulsating.transition {
|
204
|
-
|
205
|
-
box-shadow: 0 0 0 0 rgba(214, 124, 28, 0.7);
|
162
|
+
box-shadow: 0 0 0 0 rgba(214, 124, 28, 0.7);
|
206
163
|
}
|
207
164
|
.grey.pulsating.transition {
|
208
|
-
|
209
|
-
box-shadow: 0 0 0 0 rgba(118, 118, 118, 0.5);
|
165
|
+
box-shadow: 0 0 0 0 rgba(118, 118, 118, 0.5);
|
210
166
|
}
|
211
167
|
.grey.inverted.pulsating.transition {
|
212
|
-
|
213
|
-
box-shadow: 0 0 0 0 rgba(220, 221, 222, 0.7);
|
168
|
+
box-shadow: 0 0 0 0 rgba(220, 221, 222, 0.7);
|
214
169
|
}
|
215
170
|
.black.pulsating.transition {
|
216
|
-
|
217
|
-
box-shadow: 0 0 0 0 rgba(27, 28, 29, 0.5);
|
171
|
+
box-shadow: 0 0 0 0 rgba(27, 28, 29, 0.5);
|
218
172
|
}
|
219
173
|
.black.inverted.pulsating.transition {
|
220
|
-
|
221
|
-
box-shadow: 0 0 0 0 rgba(84, 84, 84, 0.7);
|
174
|
+
box-shadow: 0 0 0 0 rgba(84, 84, 84, 0.7);
|
222
175
|
}
|
223
176
|
|
224
177
|
|
@@ -238,155 +191,75 @@
|
|
238
191
|
Browse
|
239
192
|
--------------- */
|
240
193
|
.transition.browse {
|
241
|
-
|
242
|
-
animation-duration: 500ms;
|
194
|
+
animation-duration: 500ms;
|
243
195
|
}
|
244
196
|
.transition.browse.in {
|
245
|
-
|
246
|
-
animation-name: browseIn;
|
197
|
+
animation-name: browseIn;
|
247
198
|
}
|
248
199
|
.transition.browse.out,
|
249
200
|
.transition.browse.left.out {
|
250
|
-
|
251
|
-
animation-name: browseOutLeft;
|
201
|
+
animation-name: browseOutLeft;
|
252
202
|
}
|
253
203
|
.transition.browse.right.out {
|
254
|
-
|
255
|
-
animation-name: browseOutRight;
|
204
|
+
animation-name: browseOutRight;
|
256
205
|
}
|
257
206
|
|
258
207
|
/* In */
|
259
|
-
@-webkit-keyframes browseIn {
|
260
|
-
0% {
|
261
|
-
-webkit-transform: scale(0.8) translateZ(0);
|
262
|
-
transform: scale(0.8) translateZ(0);
|
263
|
-
z-index: -1;
|
264
|
-
}
|
265
|
-
10% {
|
266
|
-
-webkit-transform: scale(0.8) translateZ(0);
|
267
|
-
transform: scale(0.8) translateZ(0);
|
268
|
-
z-index: -1;
|
269
|
-
opacity: 0.7;
|
270
|
-
}
|
271
|
-
80% {
|
272
|
-
-webkit-transform: scale(1.05) translateZ(0);
|
273
|
-
transform: scale(1.05) translateZ(0);
|
274
|
-
opacity: 1;
|
275
|
-
z-index: 999;
|
276
|
-
}
|
277
|
-
100% {
|
278
|
-
-webkit-transform: scale(1) translateZ(0);
|
279
|
-
transform: scale(1) translateZ(0);
|
280
|
-
z-index: 999;
|
281
|
-
}
|
282
|
-
}
|
283
208
|
@keyframes browseIn {
|
284
209
|
0% {
|
285
|
-
|
286
|
-
transform: scale(0.8) translateZ(0);
|
210
|
+
transform: scale(0.8) translateZ(0);
|
287
211
|
z-index: -1;
|
288
212
|
}
|
289
213
|
10% {
|
290
|
-
|
291
|
-
transform: scale(0.8) translateZ(0);
|
214
|
+
transform: scale(0.8) translateZ(0);
|
292
215
|
z-index: -1;
|
293
216
|
opacity: 0.7;
|
294
217
|
}
|
295
218
|
80% {
|
296
|
-
|
297
|
-
transform: scale(1.05) translateZ(0);
|
219
|
+
transform: scale(1.05) translateZ(0);
|
298
220
|
opacity: 1;
|
299
221
|
z-index: 999;
|
300
222
|
}
|
301
223
|
100% {
|
302
|
-
|
303
|
-
transform: scale(1) translateZ(0);
|
224
|
+
transform: scale(1) translateZ(0);
|
304
225
|
z-index: 999;
|
305
226
|
}
|
306
227
|
}
|
307
228
|
|
308
229
|
/* Out */
|
309
|
-
@-webkit-keyframes browseOutLeft {
|
310
|
-
0% {
|
311
|
-
z-index: 999;
|
312
|
-
-webkit-transform: translateX(0) rotateY(0) rotateX(0);
|
313
|
-
transform: translateX(0) rotateY(0) rotateX(0);
|
314
|
-
}
|
315
|
-
50% {
|
316
|
-
z-index: -1;
|
317
|
-
-webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
318
|
-
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
319
|
-
}
|
320
|
-
80% {
|
321
|
-
opacity: 1;
|
322
|
-
}
|
323
|
-
100% {
|
324
|
-
z-index: -1;
|
325
|
-
-webkit-transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
326
|
-
transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
327
|
-
opacity: 0;
|
328
|
-
}
|
329
|
-
}
|
330
230
|
@keyframes browseOutLeft {
|
331
231
|
0% {
|
332
232
|
z-index: 999;
|
333
|
-
|
334
|
-
transform: translateX(0) rotateY(0) rotateX(0);
|
233
|
+
transform: translateX(0) rotateY(0) rotateX(0);
|
335
234
|
}
|
336
235
|
50% {
|
337
236
|
z-index: -1;
|
338
|
-
|
339
|
-
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
237
|
+
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
340
238
|
}
|
341
239
|
80% {
|
342
240
|
opacity: 1;
|
343
241
|
}
|
344
242
|
100% {
|
345
243
|
z-index: -1;
|
346
|
-
|
347
|
-
transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
348
|
-
opacity: 0;
|
349
|
-
}
|
350
|
-
}
|
351
|
-
@-webkit-keyframes browseOutRight {
|
352
|
-
0% {
|
353
|
-
z-index: 999;
|
354
|
-
-webkit-transform: translateX(0) rotateY(0) rotateX(0);
|
355
|
-
transform: translateX(0) rotateY(0) rotateX(0);
|
356
|
-
}
|
357
|
-
50% {
|
358
|
-
z-index: 1;
|
359
|
-
-webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
360
|
-
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
361
|
-
}
|
362
|
-
80% {
|
363
|
-
opacity: 1;
|
364
|
-
}
|
365
|
-
100% {
|
366
|
-
z-index: 1;
|
367
|
-
-webkit-transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
368
|
-
transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
244
|
+
transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
369
245
|
opacity: 0;
|
370
246
|
}
|
371
247
|
}
|
372
248
|
@keyframes browseOutRight {
|
373
249
|
0% {
|
374
250
|
z-index: 999;
|
375
|
-
|
376
|
-
transform: translateX(0) rotateY(0) rotateX(0);
|
251
|
+
transform: translateX(0) rotateY(0) rotateX(0);
|
377
252
|
}
|
378
253
|
50% {
|
379
254
|
z-index: 1;
|
380
|
-
|
381
|
-
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
255
|
+
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
382
256
|
}
|
383
257
|
80% {
|
384
258
|
opacity: 1;
|
385
259
|
}
|
386
260
|
100% {
|
387
261
|
z-index: 1;
|
388
|
-
|
389
|
-
transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
262
|
+
transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px);
|
390
263
|
opacity: 0;
|
391
264
|
}
|
392
265
|
}
|
@@ -395,69 +268,36 @@
|
|
395
268
|
Drop
|
396
269
|
--------------- */
|
397
270
|
.drop.transition {
|
398
|
-
|
399
|
-
|
400
|
-
-
|
401
|
-
animation-duration: 400ms;
|
402
|
-
-webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
403
|
-
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
271
|
+
transform-origin: top center;
|
272
|
+
animation-duration: 400ms;
|
273
|
+
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
404
274
|
}
|
405
275
|
.drop.transition.in {
|
406
|
-
|
407
|
-
animation-name: dropIn;
|
276
|
+
animation-name: dropIn;
|
408
277
|
}
|
409
278
|
.drop.transition.out {
|
410
|
-
|
411
|
-
animation-name: dropOut;
|
279
|
+
animation-name: dropOut;
|
412
280
|
}
|
413
281
|
|
414
282
|
/* Drop */
|
415
|
-
@-webkit-keyframes dropIn {
|
416
|
-
0% {
|
417
|
-
opacity: 0;
|
418
|
-
-webkit-transform: scale(0);
|
419
|
-
transform: scale(0);
|
420
|
-
}
|
421
|
-
100% {
|
422
|
-
opacity: 1;
|
423
|
-
-webkit-transform: scale(1);
|
424
|
-
transform: scale(1);
|
425
|
-
}
|
426
|
-
}
|
427
283
|
@keyframes dropIn {
|
428
284
|
0% {
|
429
285
|
opacity: 0;
|
430
|
-
|
431
|
-
transform: scale(0);
|
286
|
+
transform: scale(0);
|
432
287
|
}
|
433
288
|
100% {
|
434
289
|
opacity: 1;
|
435
|
-
|
436
|
-
transform: scale(1);
|
437
|
-
}
|
438
|
-
}
|
439
|
-
@-webkit-keyframes dropOut {
|
440
|
-
0% {
|
441
|
-
opacity: 1;
|
442
|
-
-webkit-transform: scale(1);
|
443
|
-
transform: scale(1);
|
444
|
-
}
|
445
|
-
100% {
|
446
|
-
opacity: 0;
|
447
|
-
-webkit-transform: scale(0);
|
448
|
-
transform: scale(0);
|
290
|
+
transform: scale(1);
|
449
291
|
}
|
450
292
|
}
|
451
293
|
@keyframes dropOut {
|
452
294
|
0% {
|
453
295
|
opacity: 1;
|
454
|
-
|
455
|
-
transform: scale(1);
|
296
|
+
transform: scale(1);
|
456
297
|
}
|
457
298
|
100% {
|
458
299
|
opacity: 0;
|
459
|
-
|
460
|
-
transform: scale(0);
|
300
|
+
transform: scale(0);
|
461
301
|
}
|
462
302
|
}
|
463
303
|
|
@@ -465,55 +305,37 @@
|
|
465
305
|
Fade
|
466
306
|
--------------- */
|
467
307
|
.transition.fade.in {
|
468
|
-
|
469
|
-
animation-name: fadeIn;
|
308
|
+
animation-name: fadeIn;
|
470
309
|
}
|
471
310
|
.transition[class*="fade up"].in {
|
472
|
-
|
473
|
-
animation-name: fadeInUp;
|
311
|
+
animation-name: fadeInUp;
|
474
312
|
}
|
475
313
|
.transition[class*="fade down"].in {
|
476
|
-
|
477
|
-
animation-name: fadeInDown;
|
314
|
+
animation-name: fadeInDown;
|
478
315
|
}
|
479
316
|
.transition[class*="fade left"].in {
|
480
|
-
|
481
|
-
animation-name: fadeInLeft;
|
317
|
+
animation-name: fadeInLeft;
|
482
318
|
}
|
483
319
|
.transition[class*="fade right"].in {
|
484
|
-
|
485
|
-
animation-name: fadeInRight;
|
320
|
+
animation-name: fadeInRight;
|
486
321
|
}
|
487
322
|
.transition.fade.out {
|
488
|
-
|
489
|
-
animation-name: fadeOut;
|
323
|
+
animation-name: fadeOut;
|
490
324
|
}
|
491
325
|
.transition[class*="fade up"].out {
|
492
|
-
|
493
|
-
animation-name: fadeOutUp;
|
326
|
+
animation-name: fadeOutUp;
|
494
327
|
}
|
495
328
|
.transition[class*="fade down"].out {
|
496
|
-
|
497
|
-
animation-name: fadeOutDown;
|
329
|
+
animation-name: fadeOutDown;
|
498
330
|
}
|
499
331
|
.transition[class*="fade left"].out {
|
500
|
-
|
501
|
-
animation-name: fadeOutLeft;
|
332
|
+
animation-name: fadeOutLeft;
|
502
333
|
}
|
503
334
|
.transition[class*="fade right"].out {
|
504
|
-
|
505
|
-
animation-name: fadeOutRight;
|
335
|
+
animation-name: fadeOutRight;
|
506
336
|
}
|
507
337
|
|
508
338
|
/* In */
|
509
|
-
@-webkit-keyframes fadeIn {
|
510
|
-
0% {
|
511
|
-
opacity: 0;
|
512
|
-
}
|
513
|
-
100% {
|
514
|
-
opacity: 1;
|
515
|
-
}
|
516
|
-
}
|
517
339
|
@keyframes fadeIn {
|
518
340
|
0% {
|
519
341
|
opacity: 0;
|
@@ -522,112 +344,48 @@
|
|
522
344
|
opacity: 1;
|
523
345
|
}
|
524
346
|
}
|
525
|
-
@-webkit-keyframes fadeInUp {
|
526
|
-
0% {
|
527
|
-
opacity: 0;
|
528
|
-
-webkit-transform: translateY(10%);
|
529
|
-
transform: translateY(10%);
|
530
|
-
}
|
531
|
-
100% {
|
532
|
-
opacity: 1;
|
533
|
-
-webkit-transform: translateY(0);
|
534
|
-
transform: translateY(0);
|
535
|
-
}
|
536
|
-
}
|
537
347
|
@keyframes fadeInUp {
|
538
348
|
0% {
|
539
349
|
opacity: 0;
|
540
|
-
|
541
|
-
transform: translateY(10%);
|
350
|
+
transform: translateY(10%);
|
542
351
|
}
|
543
352
|
100% {
|
544
353
|
opacity: 1;
|
545
|
-
|
546
|
-
transform: translateY(0);
|
547
|
-
}
|
548
|
-
}
|
549
|
-
@-webkit-keyframes fadeInDown {
|
550
|
-
0% {
|
551
|
-
opacity: 0;
|
552
|
-
-webkit-transform: translateY(-10%);
|
553
|
-
transform: translateY(-10%);
|
554
|
-
}
|
555
|
-
100% {
|
556
|
-
opacity: 1;
|
557
|
-
-webkit-transform: translateY(0);
|
558
|
-
transform: translateY(0);
|
354
|
+
transform: translateY(0);
|
559
355
|
}
|
560
356
|
}
|
561
357
|
@keyframes fadeInDown {
|
562
358
|
0% {
|
563
359
|
opacity: 0;
|
564
|
-
|
565
|
-
transform: translateY(-10%);
|
566
|
-
}
|
567
|
-
100% {
|
568
|
-
opacity: 1;
|
569
|
-
-webkit-transform: translateY(0);
|
570
|
-
transform: translateY(0);
|
571
|
-
}
|
572
|
-
}
|
573
|
-
@-webkit-keyframes fadeInLeft {
|
574
|
-
0% {
|
575
|
-
opacity: 0;
|
576
|
-
-webkit-transform: translateX(10%);
|
577
|
-
transform: translateX(10%);
|
360
|
+
transform: translateY(-10%);
|
578
361
|
}
|
579
362
|
100% {
|
580
363
|
opacity: 1;
|
581
|
-
|
582
|
-
transform: translateX(0);
|
364
|
+
transform: translateY(0);
|
583
365
|
}
|
584
366
|
}
|
585
367
|
@keyframes fadeInLeft {
|
586
368
|
0% {
|
587
369
|
opacity: 0;
|
588
|
-
|
589
|
-
transform: translateX(10%);
|
370
|
+
transform: translateX(10%);
|
590
371
|
}
|
591
372
|
100% {
|
592
373
|
opacity: 1;
|
593
|
-
|
594
|
-
transform: translateX(0);
|
595
|
-
}
|
596
|
-
}
|
597
|
-
@-webkit-keyframes fadeInRight {
|
598
|
-
0% {
|
599
|
-
opacity: 0;
|
600
|
-
-webkit-transform: translateX(-10%);
|
601
|
-
transform: translateX(-10%);
|
602
|
-
}
|
603
|
-
100% {
|
604
|
-
opacity: 1;
|
605
|
-
-webkit-transform: translateX(0);
|
606
|
-
transform: translateX(0);
|
374
|
+
transform: translateX(0);
|
607
375
|
}
|
608
376
|
}
|
609
377
|
@keyframes fadeInRight {
|
610
378
|
0% {
|
611
379
|
opacity: 0;
|
612
|
-
|
613
|
-
transform: translateX(-10%);
|
380
|
+
transform: translateX(-10%);
|
614
381
|
}
|
615
382
|
100% {
|
616
383
|
opacity: 1;
|
617
|
-
|
618
|
-
transform: translateX(0);
|
384
|
+
transform: translateX(0);
|
619
385
|
}
|
620
386
|
}
|
621
387
|
|
622
388
|
/* Out */
|
623
|
-
@-webkit-keyframes fadeOut {
|
624
|
-
0% {
|
625
|
-
opacity: 1;
|
626
|
-
}
|
627
|
-
100% {
|
628
|
-
opacity: 0;
|
629
|
-
}
|
630
|
-
}
|
631
389
|
@keyframes fadeOut {
|
632
390
|
0% {
|
633
391
|
opacity: 1;
|
@@ -636,100 +394,44 @@
|
|
636
394
|
opacity: 0;
|
637
395
|
}
|
638
396
|
}
|
639
|
-
@-webkit-keyframes fadeOutUp {
|
640
|
-
0% {
|
641
|
-
opacity: 1;
|
642
|
-
-webkit-transform: translateY(0);
|
643
|
-
transform: translateY(0);
|
644
|
-
}
|
645
|
-
100% {
|
646
|
-
opacity: 0;
|
647
|
-
-webkit-transform: translateY(5%);
|
648
|
-
transform: translateY(5%);
|
649
|
-
}
|
650
|
-
}
|
651
397
|
@keyframes fadeOutUp {
|
652
398
|
0% {
|
653
399
|
opacity: 1;
|
654
|
-
|
655
|
-
transform: translateY(0);
|
656
|
-
}
|
657
|
-
100% {
|
658
|
-
opacity: 0;
|
659
|
-
-webkit-transform: translateY(5%);
|
660
|
-
transform: translateY(5%);
|
661
|
-
}
|
662
|
-
}
|
663
|
-
@-webkit-keyframes fadeOutDown {
|
664
|
-
0% {
|
665
|
-
opacity: 1;
|
666
|
-
-webkit-transform: translateY(0);
|
667
|
-
transform: translateY(0);
|
400
|
+
transform: translateY(0);
|
668
401
|
}
|
669
402
|
100% {
|
670
403
|
opacity: 0;
|
671
|
-
|
672
|
-
transform: translateY(-5%);
|
404
|
+
transform: translateY(5%);
|
673
405
|
}
|
674
406
|
}
|
675
407
|
@keyframes fadeOutDown {
|
676
408
|
0% {
|
677
409
|
opacity: 1;
|
678
|
-
|
679
|
-
transform: translateY(0);
|
410
|
+
transform: translateY(0);
|
680
411
|
}
|
681
412
|
100% {
|
682
413
|
opacity: 0;
|
683
|
-
|
684
|
-
transform: translateY(-5%);
|
685
|
-
}
|
686
|
-
}
|
687
|
-
@-webkit-keyframes fadeOutLeft {
|
688
|
-
0% {
|
689
|
-
opacity: 1;
|
690
|
-
-webkit-transform: translateX(0);
|
691
|
-
transform: translateX(0);
|
692
|
-
}
|
693
|
-
100% {
|
694
|
-
opacity: 0;
|
695
|
-
-webkit-transform: translateX(5%);
|
696
|
-
transform: translateX(5%);
|
414
|
+
transform: translateY(-5%);
|
697
415
|
}
|
698
416
|
}
|
699
417
|
@keyframes fadeOutLeft {
|
700
418
|
0% {
|
701
419
|
opacity: 1;
|
702
|
-
|
703
|
-
transform: translateX(0);
|
420
|
+
transform: translateX(0);
|
704
421
|
}
|
705
422
|
100% {
|
706
423
|
opacity: 0;
|
707
|
-
|
708
|
-
transform: translateX(5%);
|
709
|
-
}
|
710
|
-
}
|
711
|
-
@-webkit-keyframes fadeOutRight {
|
712
|
-
0% {
|
713
|
-
opacity: 1;
|
714
|
-
-webkit-transform: translateX(0);
|
715
|
-
transform: translateX(0);
|
716
|
-
}
|
717
|
-
100% {
|
718
|
-
opacity: 0;
|
719
|
-
-webkit-transform: translateX(-5%);
|
720
|
-
transform: translateX(-5%);
|
424
|
+
transform: translateX(5%);
|
721
425
|
}
|
722
426
|
}
|
723
427
|
@keyframes fadeOutRight {
|
724
428
|
0% {
|
725
429
|
opacity: 1;
|
726
|
-
|
727
|
-
transform: translateX(0);
|
430
|
+
transform: translateX(0);
|
728
431
|
}
|
729
432
|
100% {
|
730
433
|
opacity: 0;
|
731
|
-
|
732
|
-
transform: translateX(-5%);
|
434
|
+
transform: translateX(-5%);
|
733
435
|
}
|
734
436
|
}
|
735
437
|
|
@@ -738,122 +440,61 @@
|
|
738
440
|
--------------- */
|
739
441
|
.flip.transition.in,
|
740
442
|
.flip.transition.out {
|
741
|
-
|
742
|
-
animation-duration: 600ms;
|
443
|
+
animation-duration: 600ms;
|
743
444
|
}
|
744
445
|
.horizontal.flip.transition.in {
|
745
|
-
|
746
|
-
animation-name: horizontalFlipIn;
|
446
|
+
animation-name: horizontalFlipIn;
|
747
447
|
}
|
748
448
|
.horizontal.flip.transition.out {
|
749
|
-
|
750
|
-
animation-name: horizontalFlipOut;
|
449
|
+
animation-name: horizontalFlipOut;
|
751
450
|
}
|
752
451
|
.vertical.flip.transition.in {
|
753
|
-
|
754
|
-
animation-name: verticalFlipIn;
|
452
|
+
animation-name: verticalFlipIn;
|
755
453
|
}
|
756
454
|
.vertical.flip.transition.out {
|
757
|
-
|
758
|
-
animation-name: verticalFlipOut;
|
455
|
+
animation-name: verticalFlipOut;
|
759
456
|
}
|
760
457
|
|
761
458
|
/* In */
|
762
|
-
@-webkit-keyframes horizontalFlipIn {
|
763
|
-
0% {
|
764
|
-
-webkit-transform: perspective(2000px) rotateY(-90deg);
|
765
|
-
transform: perspective(2000px) rotateY(-90deg);
|
766
|
-
opacity: 0;
|
767
|
-
}
|
768
|
-
100% {
|
769
|
-
-webkit-transform: perspective(2000px) rotateY(0);
|
770
|
-
transform: perspective(2000px) rotateY(0);
|
771
|
-
opacity: 1;
|
772
|
-
}
|
773
|
-
}
|
774
459
|
@keyframes horizontalFlipIn {
|
775
460
|
0% {
|
776
|
-
|
777
|
-
transform: perspective(2000px) rotateY(-90deg);
|
778
|
-
opacity: 0;
|
779
|
-
}
|
780
|
-
100% {
|
781
|
-
-webkit-transform: perspective(2000px) rotateY(0);
|
782
|
-
transform: perspective(2000px) rotateY(0);
|
783
|
-
opacity: 1;
|
784
|
-
}
|
785
|
-
}
|
786
|
-
@-webkit-keyframes verticalFlipIn {
|
787
|
-
0% {
|
788
|
-
-webkit-transform: perspective(2000px) rotateX(-90deg);
|
789
|
-
transform: perspective(2000px) rotateX(-90deg);
|
461
|
+
transform: perspective(2000px) rotateY(-90deg);
|
790
462
|
opacity: 0;
|
791
463
|
}
|
792
464
|
100% {
|
793
|
-
|
794
|
-
transform: perspective(2000px) rotateX(0);
|
465
|
+
transform: perspective(2000px) rotateY(0);
|
795
466
|
opacity: 1;
|
796
467
|
}
|
797
468
|
}
|
798
469
|
@keyframes verticalFlipIn {
|
799
470
|
0% {
|
800
|
-
|
801
|
-
transform: perspective(2000px) rotateX(-90deg);
|
471
|
+
transform: perspective(2000px) rotateX(-90deg);
|
802
472
|
opacity: 0;
|
803
473
|
}
|
804
474
|
100% {
|
805
|
-
|
806
|
-
transform: perspective(2000px) rotateX(0);
|
475
|
+
transform: perspective(2000px) rotateX(0);
|
807
476
|
opacity: 1;
|
808
477
|
}
|
809
478
|
}
|
810
479
|
|
811
480
|
/* Out */
|
812
|
-
@-webkit-keyframes horizontalFlipOut {
|
813
|
-
0% {
|
814
|
-
-webkit-transform: perspective(2000px) rotateY(0);
|
815
|
-
transform: perspective(2000px) rotateY(0);
|
816
|
-
opacity: 1;
|
817
|
-
}
|
818
|
-
100% {
|
819
|
-
-webkit-transform: perspective(2000px) rotateY(90deg);
|
820
|
-
transform: perspective(2000px) rotateY(90deg);
|
821
|
-
opacity: 0;
|
822
|
-
}
|
823
|
-
}
|
824
481
|
@keyframes horizontalFlipOut {
|
825
482
|
0% {
|
826
|
-
|
827
|
-
transform: perspective(2000px) rotateY(0);
|
483
|
+
transform: perspective(2000px) rotateY(0);
|
828
484
|
opacity: 1;
|
829
485
|
}
|
830
486
|
100% {
|
831
|
-
|
832
|
-
transform: perspective(2000px) rotateY(90deg);
|
833
|
-
opacity: 0;
|
834
|
-
}
|
835
|
-
}
|
836
|
-
@-webkit-keyframes verticalFlipOut {
|
837
|
-
0% {
|
838
|
-
-webkit-transform: perspective(2000px) rotateX(0);
|
839
|
-
transform: perspective(2000px) rotateX(0);
|
840
|
-
opacity: 1;
|
841
|
-
}
|
842
|
-
100% {
|
843
|
-
-webkit-transform: perspective(2000px) rotateX(-90deg);
|
844
|
-
transform: perspective(2000px) rotateX(-90deg);
|
487
|
+
transform: perspective(2000px) rotateY(90deg);
|
845
488
|
opacity: 0;
|
846
489
|
}
|
847
490
|
}
|
848
491
|
@keyframes verticalFlipOut {
|
849
492
|
0% {
|
850
|
-
|
851
|
-
transform: perspective(2000px) rotateX(0);
|
493
|
+
transform: perspective(2000px) rotateX(0);
|
852
494
|
opacity: 1;
|
853
495
|
}
|
854
496
|
100% {
|
855
|
-
|
856
|
-
transform: perspective(2000px) rotateX(-90deg);
|
497
|
+
transform: perspective(2000px) rotateX(-90deg);
|
857
498
|
opacity: 0;
|
858
499
|
}
|
859
500
|
}
|
@@ -862,61 +503,31 @@
|
|
862
503
|
Scale
|
863
504
|
--------------- */
|
864
505
|
.scale.transition.in {
|
865
|
-
|
866
|
-
animation-name: scaleIn;
|
506
|
+
animation-name: scaleIn;
|
867
507
|
}
|
868
508
|
.scale.transition.out {
|
869
|
-
|
870
|
-
animation-name: scaleOut;
|
871
|
-
}
|
872
|
-
@-webkit-keyframes scaleIn {
|
873
|
-
0% {
|
874
|
-
opacity: 0;
|
875
|
-
-webkit-transform: scale(0.8);
|
876
|
-
transform: scale(0.8);
|
877
|
-
}
|
878
|
-
100% {
|
879
|
-
opacity: 1;
|
880
|
-
-webkit-transform: scale(1);
|
881
|
-
transform: scale(1);
|
882
|
-
}
|
509
|
+
animation-name: scaleOut;
|
883
510
|
}
|
884
511
|
@keyframes scaleIn {
|
885
512
|
0% {
|
886
513
|
opacity: 0;
|
887
|
-
|
888
|
-
transform: scale(0.8);
|
514
|
+
transform: scale(0.8);
|
889
515
|
}
|
890
516
|
100% {
|
891
517
|
opacity: 1;
|
892
|
-
|
893
|
-
transform: scale(1);
|
518
|
+
transform: scale(1);
|
894
519
|
}
|
895
520
|
}
|
896
521
|
|
897
522
|
/* Out */
|
898
|
-
@-webkit-keyframes scaleOut {
|
899
|
-
0% {
|
900
|
-
opacity: 1;
|
901
|
-
-webkit-transform: scale(1);
|
902
|
-
transform: scale(1);
|
903
|
-
}
|
904
|
-
100% {
|
905
|
-
opacity: 0;
|
906
|
-
-webkit-transform: scale(0.9);
|
907
|
-
transform: scale(0.9);
|
908
|
-
}
|
909
|
-
}
|
910
523
|
@keyframes scaleOut {
|
911
524
|
0% {
|
912
525
|
opacity: 1;
|
913
|
-
|
914
|
-
transform: scale(1);
|
526
|
+
transform: scale(1);
|
915
527
|
}
|
916
528
|
100% {
|
917
529
|
opacity: 0;
|
918
|
-
|
919
|
-
transform: scale(0.9);
|
530
|
+
transform: scale(0.9);
|
920
531
|
}
|
921
532
|
}
|
922
533
|
|
@@ -926,455 +537,204 @@
|
|
926
537
|
|
927
538
|
/* Inward */
|
928
539
|
.transition.fly {
|
929
|
-
|
930
|
-
|
931
|
-
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
932
|
-
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
540
|
+
animation-duration: 0.6s;
|
541
|
+
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
933
542
|
}
|
934
543
|
.transition.fly.in {
|
935
|
-
|
936
|
-
animation-name: flyIn;
|
544
|
+
animation-name: flyIn;
|
937
545
|
}
|
938
546
|
.transition[class*="fly up"].in {
|
939
|
-
|
940
|
-
animation-name: flyInUp;
|
547
|
+
animation-name: flyInUp;
|
941
548
|
}
|
942
549
|
.transition[class*="fly down"].in {
|
943
|
-
|
944
|
-
animation-name: flyInDown;
|
550
|
+
animation-name: flyInDown;
|
945
551
|
}
|
946
552
|
.transition[class*="fly left"].in {
|
947
|
-
|
948
|
-
animation-name: flyInLeft;
|
553
|
+
animation-name: flyInLeft;
|
949
554
|
}
|
950
555
|
.transition[class*="fly right"].in {
|
951
|
-
|
952
|
-
animation-name: flyInRight;
|
556
|
+
animation-name: flyInRight;
|
953
557
|
}
|
954
558
|
|
955
559
|
/* Outward */
|
956
560
|
.transition.fly.out {
|
957
|
-
|
958
|
-
animation-name: flyOut;
|
561
|
+
animation-name: flyOut;
|
959
562
|
}
|
960
563
|
.transition[class*="fly up"].out {
|
961
|
-
|
962
|
-
animation-name: flyOutUp;
|
564
|
+
animation-name: flyOutUp;
|
963
565
|
}
|
964
566
|
.transition[class*="fly down"].out {
|
965
|
-
|
966
|
-
animation-name: flyOutDown;
|
567
|
+
animation-name: flyOutDown;
|
967
568
|
}
|
968
569
|
.transition[class*="fly left"].out {
|
969
|
-
|
970
|
-
animation-name: flyOutLeft;
|
570
|
+
animation-name: flyOutLeft;
|
971
571
|
}
|
972
572
|
.transition[class*="fly right"].out {
|
973
|
-
|
974
|
-
animation-name: flyOutRight;
|
573
|
+
animation-name: flyOutRight;
|
975
574
|
}
|
976
575
|
|
977
576
|
/* In */
|
978
|
-
@-webkit-keyframes flyIn {
|
979
|
-
0% {
|
980
|
-
opacity: 0;
|
981
|
-
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
982
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
983
|
-
}
|
984
|
-
20% {
|
985
|
-
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
986
|
-
transform: scale3d(1.1, 1.1, 1.1);
|
987
|
-
}
|
988
|
-
40% {
|
989
|
-
-webkit-transform: scale3d(0.9, 0.9, 0.9);
|
990
|
-
transform: scale3d(0.9, 0.9, 0.9);
|
991
|
-
}
|
992
|
-
60% {
|
993
|
-
opacity: 1;
|
994
|
-
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
995
|
-
transform: scale3d(1.03, 1.03, 1.03);
|
996
|
-
}
|
997
|
-
80% {
|
998
|
-
-webkit-transform: scale3d(0.97, 0.97, 0.97);
|
999
|
-
transform: scale3d(0.97, 0.97, 0.97);
|
1000
|
-
}
|
1001
|
-
100% {
|
1002
|
-
opacity: 1;
|
1003
|
-
-webkit-transform: scale3d(1, 1, 1);
|
1004
|
-
transform: scale3d(1, 1, 1);
|
1005
|
-
}
|
1006
|
-
}
|
1007
577
|
@keyframes flyIn {
|
1008
578
|
0% {
|
1009
579
|
opacity: 0;
|
1010
|
-
|
1011
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
580
|
+
transform: scale3d(0.3, 0.3, 0.3);
|
1012
581
|
}
|
1013
582
|
20% {
|
1014
|
-
|
1015
|
-
transform: scale3d(1.1, 1.1, 1.1);
|
583
|
+
transform: scale3d(1.1, 1.1, 1.1);
|
1016
584
|
}
|
1017
585
|
40% {
|
1018
|
-
|
1019
|
-
transform: scale3d(0.9, 0.9, 0.9);
|
586
|
+
transform: scale3d(0.9, 0.9, 0.9);
|
1020
587
|
}
|
1021
588
|
60% {
|
1022
589
|
opacity: 1;
|
1023
|
-
|
1024
|
-
transform: scale3d(1.03, 1.03, 1.03);
|
590
|
+
transform: scale3d(1.03, 1.03, 1.03);
|
1025
591
|
}
|
1026
592
|
80% {
|
1027
|
-
|
1028
|
-
transform: scale3d(0.97, 0.97, 0.97);
|
593
|
+
transform: scale3d(0.97, 0.97, 0.97);
|
1029
594
|
}
|
1030
595
|
100% {
|
1031
596
|
opacity: 1;
|
1032
|
-
|
1033
|
-
transform: scale3d(1, 1, 1);
|
1034
|
-
}
|
1035
|
-
}
|
1036
|
-
@-webkit-keyframes flyInUp {
|
1037
|
-
0% {
|
1038
|
-
opacity: 0;
|
1039
|
-
-webkit-transform: translate3d(0, 1500px, 0);
|
1040
|
-
transform: translate3d(0, 1500px, 0);
|
1041
|
-
}
|
1042
|
-
60% {
|
1043
|
-
opacity: 1;
|
1044
|
-
-webkit-transform: translate3d(0, -20px, 0);
|
1045
|
-
transform: translate3d(0, -20px, 0);
|
1046
|
-
}
|
1047
|
-
75% {
|
1048
|
-
-webkit-transform: translate3d(0, 10px, 0);
|
1049
|
-
transform: translate3d(0, 10px, 0);
|
1050
|
-
}
|
1051
|
-
90% {
|
1052
|
-
-webkit-transform: translate3d(0, -5px, 0);
|
1053
|
-
transform: translate3d(0, -5px, 0);
|
1054
|
-
}
|
1055
|
-
100% {
|
1056
|
-
-webkit-transform: translate3d(0, 0, 0);
|
1057
|
-
transform: translate3d(0, 0, 0);
|
597
|
+
transform: scale3d(1, 1, 1);
|
1058
598
|
}
|
1059
599
|
}
|
1060
600
|
@keyframes flyInUp {
|
1061
601
|
0% {
|
1062
602
|
opacity: 0;
|
1063
|
-
|
1064
|
-
transform: translate3d(0, 1500px, 0);
|
1065
|
-
}
|
1066
|
-
60% {
|
1067
|
-
opacity: 1;
|
1068
|
-
-webkit-transform: translate3d(0, -20px, 0);
|
1069
|
-
transform: translate3d(0, -20px, 0);
|
1070
|
-
}
|
1071
|
-
75% {
|
1072
|
-
-webkit-transform: translate3d(0, 10px, 0);
|
1073
|
-
transform: translate3d(0, 10px, 0);
|
1074
|
-
}
|
1075
|
-
90% {
|
1076
|
-
-webkit-transform: translate3d(0, -5px, 0);
|
1077
|
-
transform: translate3d(0, -5px, 0);
|
1078
|
-
}
|
1079
|
-
100% {
|
1080
|
-
-webkit-transform: translate3d(0, 0, 0);
|
1081
|
-
transform: translate3d(0, 0, 0);
|
1082
|
-
}
|
1083
|
-
}
|
1084
|
-
@-webkit-keyframes flyInDown {
|
1085
|
-
0% {
|
1086
|
-
opacity: 0;
|
1087
|
-
-webkit-transform: translate3d(0, -1500px, 0);
|
1088
|
-
transform: translate3d(0, -1500px, 0);
|
603
|
+
transform: translate3d(0, 1500px, 0);
|
1089
604
|
}
|
1090
605
|
60% {
|
1091
606
|
opacity: 1;
|
1092
|
-
|
1093
|
-
transform: translate3d(0, 25px, 0);
|
607
|
+
transform: translate3d(0, -20px, 0);
|
1094
608
|
}
|
1095
609
|
75% {
|
1096
|
-
|
1097
|
-
transform: translate3d(0, -10px, 0);
|
610
|
+
transform: translate3d(0, 10px, 0);
|
1098
611
|
}
|
1099
612
|
90% {
|
1100
|
-
|
1101
|
-
transform: translate3d(0, 5px, 0);
|
613
|
+
transform: translate3d(0, -5px, 0);
|
1102
614
|
}
|
1103
615
|
100% {
|
1104
|
-
|
1105
|
-
transform: none;
|
616
|
+
transform: translate3d(0, 0, 0);
|
1106
617
|
}
|
1107
618
|
}
|
1108
619
|
@keyframes flyInDown {
|
1109
620
|
0% {
|
1110
621
|
opacity: 0;
|
1111
|
-
|
1112
|
-
transform: translate3d(0, -1500px, 0);
|
622
|
+
transform: translate3d(0, -1500px, 0);
|
1113
623
|
}
|
1114
624
|
60% {
|
1115
625
|
opacity: 1;
|
1116
|
-
|
1117
|
-
transform: translate3d(0, 25px, 0);
|
626
|
+
transform: translate3d(0, 25px, 0);
|
1118
627
|
}
|
1119
628
|
75% {
|
1120
|
-
|
1121
|
-
transform: translate3d(0, -10px, 0);
|
629
|
+
transform: translate3d(0, -10px, 0);
|
1122
630
|
}
|
1123
631
|
90% {
|
1124
|
-
|
1125
|
-
transform: translate3d(0, 5px, 0);
|
632
|
+
transform: translate3d(0, 5px, 0);
|
1126
633
|
}
|
1127
634
|
100% {
|
1128
|
-
|
1129
|
-
transform: none;
|
1130
|
-
}
|
1131
|
-
}
|
1132
|
-
@-webkit-keyframes flyInLeft {
|
1133
|
-
0% {
|
1134
|
-
opacity: 0;
|
1135
|
-
-webkit-transform: translate3d(1500px, 0, 0);
|
1136
|
-
transform: translate3d(1500px, 0, 0);
|
1137
|
-
}
|
1138
|
-
60% {
|
1139
|
-
opacity: 1;
|
1140
|
-
-webkit-transform: translate3d(-25px, 0, 0);
|
1141
|
-
transform: translate3d(-25px, 0, 0);
|
1142
|
-
}
|
1143
|
-
75% {
|
1144
|
-
-webkit-transform: translate3d(10px, 0, 0);
|
1145
|
-
transform: translate3d(10px, 0, 0);
|
1146
|
-
}
|
1147
|
-
90% {
|
1148
|
-
-webkit-transform: translate3d(-5px, 0, 0);
|
1149
|
-
transform: translate3d(-5px, 0, 0);
|
1150
|
-
}
|
1151
|
-
100% {
|
1152
|
-
-webkit-transform: none;
|
1153
|
-
transform: none;
|
635
|
+
transform: none;
|
1154
636
|
}
|
1155
637
|
}
|
1156
638
|
@keyframes flyInLeft {
|
1157
639
|
0% {
|
1158
640
|
opacity: 0;
|
1159
|
-
|
1160
|
-
transform: translate3d(1500px, 0, 0);
|
1161
|
-
}
|
1162
|
-
60% {
|
1163
|
-
opacity: 1;
|
1164
|
-
-webkit-transform: translate3d(-25px, 0, 0);
|
1165
|
-
transform: translate3d(-25px, 0, 0);
|
1166
|
-
}
|
1167
|
-
75% {
|
1168
|
-
-webkit-transform: translate3d(10px, 0, 0);
|
1169
|
-
transform: translate3d(10px, 0, 0);
|
1170
|
-
}
|
1171
|
-
90% {
|
1172
|
-
-webkit-transform: translate3d(-5px, 0, 0);
|
1173
|
-
transform: translate3d(-5px, 0, 0);
|
1174
|
-
}
|
1175
|
-
100% {
|
1176
|
-
-webkit-transform: none;
|
1177
|
-
transform: none;
|
1178
|
-
}
|
1179
|
-
}
|
1180
|
-
@-webkit-keyframes flyInRight {
|
1181
|
-
0% {
|
1182
|
-
opacity: 0;
|
1183
|
-
-webkit-transform: translate3d(-1500px, 0, 0);
|
1184
|
-
transform: translate3d(-1500px, 0, 0);
|
641
|
+
transform: translate3d(1500px, 0, 0);
|
1185
642
|
}
|
1186
643
|
60% {
|
1187
644
|
opacity: 1;
|
1188
|
-
|
1189
|
-
transform: translate3d(25px, 0, 0);
|
645
|
+
transform: translate3d(-25px, 0, 0);
|
1190
646
|
}
|
1191
647
|
75% {
|
1192
|
-
|
1193
|
-
transform: translate3d(-10px, 0, 0);
|
648
|
+
transform: translate3d(10px, 0, 0);
|
1194
649
|
}
|
1195
650
|
90% {
|
1196
|
-
|
1197
|
-
transform: translate3d(5px, 0, 0);
|
651
|
+
transform: translate3d(-5px, 0, 0);
|
1198
652
|
}
|
1199
653
|
100% {
|
1200
|
-
|
1201
|
-
transform: none;
|
654
|
+
transform: none;
|
1202
655
|
}
|
1203
656
|
}
|
1204
657
|
@keyframes flyInRight {
|
1205
658
|
0% {
|
1206
659
|
opacity: 0;
|
1207
|
-
|
1208
|
-
transform: translate3d(-1500px, 0, 0);
|
660
|
+
transform: translate3d(-1500px, 0, 0);
|
1209
661
|
}
|
1210
662
|
60% {
|
1211
663
|
opacity: 1;
|
1212
|
-
|
1213
|
-
transform: translate3d(25px, 0, 0);
|
664
|
+
transform: translate3d(25px, 0, 0);
|
1214
665
|
}
|
1215
666
|
75% {
|
1216
|
-
|
1217
|
-
transform: translate3d(-10px, 0, 0);
|
667
|
+
transform: translate3d(-10px, 0, 0);
|
1218
668
|
}
|
1219
669
|
90% {
|
1220
|
-
|
1221
|
-
transform: translate3d(5px, 0, 0);
|
670
|
+
transform: translate3d(5px, 0, 0);
|
1222
671
|
}
|
1223
672
|
100% {
|
1224
|
-
|
1225
|
-
transform: none;
|
673
|
+
transform: none;
|
1226
674
|
}
|
1227
675
|
}
|
1228
676
|
|
1229
677
|
/* Out */
|
1230
|
-
@-webkit-keyframes flyOut {
|
1231
|
-
20% {
|
1232
|
-
-webkit-transform: scale3d(0.9, 0.9, 0.9);
|
1233
|
-
transform: scale3d(0.9, 0.9, 0.9);
|
1234
|
-
}
|
1235
|
-
50%,
|
1236
|
-
55% {
|
1237
|
-
opacity: 1;
|
1238
|
-
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
1239
|
-
transform: scale3d(1.1, 1.1, 1.1);
|
1240
|
-
}
|
1241
|
-
100% {
|
1242
|
-
opacity: 0;
|
1243
|
-
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
1244
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
1245
|
-
}
|
1246
|
-
}
|
1247
678
|
@keyframes flyOut {
|
1248
679
|
20% {
|
1249
|
-
|
1250
|
-
transform: scale3d(0.9, 0.9, 0.9);
|
680
|
+
transform: scale3d(0.9, 0.9, 0.9);
|
1251
681
|
}
|
1252
682
|
50%,
|
1253
683
|
55% {
|
1254
684
|
opacity: 1;
|
1255
|
-
|
1256
|
-
transform: scale3d(1.1, 1.1, 1.1);
|
685
|
+
transform: scale3d(1.1, 1.1, 1.1);
|
1257
686
|
}
|
1258
687
|
100% {
|
1259
688
|
opacity: 0;
|
1260
|
-
|
1261
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
1262
|
-
}
|
1263
|
-
}
|
1264
|
-
@-webkit-keyframes flyOutUp {
|
1265
|
-
20% {
|
1266
|
-
-webkit-transform: translate3d(0, 10px, 0);
|
1267
|
-
transform: translate3d(0, 10px, 0);
|
1268
|
-
}
|
1269
|
-
40%,
|
1270
|
-
45% {
|
1271
|
-
opacity: 1;
|
1272
|
-
-webkit-transform: translate3d(0, -20px, 0);
|
1273
|
-
transform: translate3d(0, -20px, 0);
|
1274
|
-
}
|
1275
|
-
100% {
|
1276
|
-
opacity: 0;
|
1277
|
-
-webkit-transform: translate3d(0, 2000px, 0);
|
1278
|
-
transform: translate3d(0, 2000px, 0);
|
689
|
+
transform: scale3d(0.3, 0.3, 0.3);
|
1279
690
|
}
|
1280
691
|
}
|
1281
692
|
@keyframes flyOutUp {
|
1282
693
|
20% {
|
1283
|
-
|
1284
|
-
transform: translate3d(0, 10px, 0);
|
694
|
+
transform: translate3d(0, 10px, 0);
|
1285
695
|
}
|
1286
696
|
40%,
|
1287
697
|
45% {
|
1288
698
|
opacity: 1;
|
1289
|
-
|
1290
|
-
transform: translate3d(0, -20px, 0);
|
699
|
+
transform: translate3d(0, -20px, 0);
|
1291
700
|
}
|
1292
701
|
100% {
|
1293
702
|
opacity: 0;
|
1294
|
-
|
1295
|
-
transform: translate3d(0, 2000px, 0);
|
1296
|
-
}
|
1297
|
-
}
|
1298
|
-
@-webkit-keyframes flyOutDown {
|
1299
|
-
20% {
|
1300
|
-
-webkit-transform: translate3d(0, -10px, 0);
|
1301
|
-
transform: translate3d(0, -10px, 0);
|
1302
|
-
}
|
1303
|
-
40%,
|
1304
|
-
45% {
|
1305
|
-
opacity: 1;
|
1306
|
-
-webkit-transform: translate3d(0, 20px, 0);
|
1307
|
-
transform: translate3d(0, 20px, 0);
|
1308
|
-
}
|
1309
|
-
100% {
|
1310
|
-
opacity: 0;
|
1311
|
-
-webkit-transform: translate3d(0, -2000px, 0);
|
1312
|
-
transform: translate3d(0, -2000px, 0);
|
703
|
+
transform: translate3d(0, 2000px, 0);
|
1313
704
|
}
|
1314
705
|
}
|
1315
706
|
@keyframes flyOutDown {
|
1316
707
|
20% {
|
1317
|
-
|
1318
|
-
transform: translate3d(0, -10px, 0);
|
708
|
+
transform: translate3d(0, -10px, 0);
|
1319
709
|
}
|
1320
710
|
40%,
|
1321
711
|
45% {
|
1322
712
|
opacity: 1;
|
1323
|
-
|
1324
|
-
transform: translate3d(0, 20px, 0);
|
713
|
+
transform: translate3d(0, 20px, 0);
|
1325
714
|
}
|
1326
715
|
100% {
|
1327
716
|
opacity: 0;
|
1328
|
-
|
1329
|
-
transform: translate3d(0, -2000px, 0);
|
1330
|
-
}
|
1331
|
-
}
|
1332
|
-
@-webkit-keyframes flyOutRight {
|
1333
|
-
20% {
|
1334
|
-
opacity: 1;
|
1335
|
-
-webkit-transform: translate3d(20px, 0, 0);
|
1336
|
-
transform: translate3d(20px, 0, 0);
|
1337
|
-
}
|
1338
|
-
100% {
|
1339
|
-
opacity: 0;
|
1340
|
-
-webkit-transform: translate3d(-2000px, 0, 0);
|
1341
|
-
transform: translate3d(-2000px, 0, 0);
|
717
|
+
transform: translate3d(0, -2000px, 0);
|
1342
718
|
}
|
1343
719
|
}
|
1344
720
|
@keyframes flyOutRight {
|
1345
721
|
20% {
|
1346
722
|
opacity: 1;
|
1347
|
-
|
1348
|
-
transform: translate3d(20px, 0, 0);
|
723
|
+
transform: translate3d(20px, 0, 0);
|
1349
724
|
}
|
1350
725
|
100% {
|
1351
726
|
opacity: 0;
|
1352
|
-
|
1353
|
-
transform: translate3d(-2000px, 0, 0);
|
1354
|
-
}
|
1355
|
-
}
|
1356
|
-
@-webkit-keyframes flyOutLeft {
|
1357
|
-
20% {
|
1358
|
-
opacity: 1;
|
1359
|
-
-webkit-transform: translate3d(-20px, 0, 0);
|
1360
|
-
transform: translate3d(-20px, 0, 0);
|
1361
|
-
}
|
1362
|
-
100% {
|
1363
|
-
opacity: 0;
|
1364
|
-
-webkit-transform: translate3d(2000px, 0, 0);
|
1365
|
-
transform: translate3d(2000px, 0, 0);
|
727
|
+
transform: translate3d(-2000px, 0, 0);
|
1366
728
|
}
|
1367
729
|
}
|
1368
730
|
@keyframes flyOutLeft {
|
1369
731
|
20% {
|
1370
732
|
opacity: 1;
|
1371
|
-
|
1372
|
-
transform: translate3d(-20px, 0, 0);
|
733
|
+
transform: translate3d(-20px, 0, 0);
|
1373
734
|
}
|
1374
735
|
100% {
|
1375
736
|
opacity: 0;
|
1376
|
-
|
1377
|
-
transform: translate3d(2000px, 0, 0);
|
737
|
+
transform: translate3d(2000px, 0, 0);
|
1378
738
|
}
|
1379
739
|
}
|
1380
740
|
|
@@ -1383,152 +743,80 @@
|
|
1383
743
|
--------------- */
|
1384
744
|
.transition.slide.in,
|
1385
745
|
.transition[class*="slide down"].in {
|
1386
|
-
|
1387
|
-
|
1388
|
-
-webkit-transform-origin: top center;
|
1389
|
-
transform-origin: top center;
|
746
|
+
animation-name: slideInY;
|
747
|
+
transform-origin: top center;
|
1390
748
|
}
|
1391
749
|
.transition[class*="slide up"].in {
|
1392
|
-
|
1393
|
-
|
1394
|
-
-webkit-transform-origin: bottom center;
|
1395
|
-
transform-origin: bottom center;
|
750
|
+
animation-name: slideInY;
|
751
|
+
transform-origin: bottom center;
|
1396
752
|
}
|
1397
753
|
.transition[class*="slide left"].in {
|
1398
|
-
|
1399
|
-
|
1400
|
-
-webkit-transform-origin: right center;
|
1401
|
-
transform-origin: right center;
|
754
|
+
animation-name: slideInX;
|
755
|
+
transform-origin: right center;
|
1402
756
|
}
|
1403
757
|
.transition[class*="slide right"].in {
|
1404
|
-
|
1405
|
-
|
1406
|
-
-webkit-transform-origin: left center;
|
1407
|
-
transform-origin: left center;
|
758
|
+
animation-name: slideInX;
|
759
|
+
transform-origin: left center;
|
1408
760
|
}
|
1409
761
|
.transition.slide.out,
|
1410
762
|
.transition[class*="slide down"].out {
|
1411
|
-
|
1412
|
-
|
1413
|
-
-webkit-transform-origin: top center;
|
1414
|
-
transform-origin: top center;
|
763
|
+
animation-name: slideOutY;
|
764
|
+
transform-origin: top center;
|
1415
765
|
}
|
1416
766
|
.transition[class*="slide up"].out {
|
1417
|
-
|
1418
|
-
|
1419
|
-
-webkit-transform-origin: bottom center;
|
1420
|
-
transform-origin: bottom center;
|
767
|
+
animation-name: slideOutY;
|
768
|
+
transform-origin: bottom center;
|
1421
769
|
}
|
1422
770
|
.transition[class*="slide left"].out {
|
1423
|
-
|
1424
|
-
|
1425
|
-
-webkit-transform-origin: right center;
|
1426
|
-
transform-origin: right center;
|
771
|
+
animation-name: slideOutX;
|
772
|
+
transform-origin: right center;
|
1427
773
|
}
|
1428
774
|
.transition[class*="slide right"].out {
|
1429
|
-
|
1430
|
-
|
1431
|
-
-webkit-transform-origin: left center;
|
1432
|
-
transform-origin: left center;
|
775
|
+
animation-name: slideOutX;
|
776
|
+
transform-origin: left center;
|
1433
777
|
}
|
1434
778
|
|
1435
779
|
/* In */
|
1436
|
-
@-webkit-keyframes slideInY {
|
1437
|
-
0% {
|
1438
|
-
opacity: 0;
|
1439
|
-
-webkit-transform: scaleY(0);
|
1440
|
-
transform: scaleY(0);
|
1441
|
-
}
|
1442
|
-
100% {
|
1443
|
-
opacity: 1;
|
1444
|
-
-webkit-transform: scaleY(1);
|
1445
|
-
transform: scaleY(1);
|
1446
|
-
}
|
1447
|
-
}
|
1448
780
|
@keyframes slideInY {
|
1449
781
|
0% {
|
1450
782
|
opacity: 0;
|
1451
|
-
|
1452
|
-
transform: scaleY(0);
|
783
|
+
transform: scaleY(0);
|
1453
784
|
}
|
1454
785
|
100% {
|
1455
786
|
opacity: 1;
|
1456
|
-
|
1457
|
-
transform: scaleY(1);
|
1458
|
-
}
|
1459
|
-
}
|
1460
|
-
@-webkit-keyframes slideInX {
|
1461
|
-
0% {
|
1462
|
-
opacity: 0;
|
1463
|
-
-webkit-transform: scaleX(0);
|
1464
|
-
transform: scaleX(0);
|
1465
|
-
}
|
1466
|
-
100% {
|
1467
|
-
opacity: 1;
|
1468
|
-
-webkit-transform: scaleX(1);
|
1469
|
-
transform: scaleX(1);
|
787
|
+
transform: scaleY(1);
|
1470
788
|
}
|
1471
789
|
}
|
1472
790
|
@keyframes slideInX {
|
1473
791
|
0% {
|
1474
792
|
opacity: 0;
|
1475
|
-
|
1476
|
-
transform: scaleX(0);
|
793
|
+
transform: scaleX(0);
|
1477
794
|
}
|
1478
795
|
100% {
|
1479
796
|
opacity: 1;
|
1480
|
-
|
1481
|
-
transform: scaleX(1);
|
797
|
+
transform: scaleX(1);
|
1482
798
|
}
|
1483
799
|
}
|
1484
800
|
|
1485
801
|
/* Out */
|
1486
|
-
@-webkit-keyframes slideOutY {
|
1487
|
-
0% {
|
1488
|
-
opacity: 1;
|
1489
|
-
-webkit-transform: scaleY(1);
|
1490
|
-
transform: scaleY(1);
|
1491
|
-
}
|
1492
|
-
100% {
|
1493
|
-
opacity: 0;
|
1494
|
-
-webkit-transform: scaleY(0);
|
1495
|
-
transform: scaleY(0);
|
1496
|
-
}
|
1497
|
-
}
|
1498
802
|
@keyframes slideOutY {
|
1499
803
|
0% {
|
1500
804
|
opacity: 1;
|
1501
|
-
|
1502
|
-
transform: scaleY(1);
|
805
|
+
transform: scaleY(1);
|
1503
806
|
}
|
1504
807
|
100% {
|
1505
808
|
opacity: 0;
|
1506
|
-
|
1507
|
-
transform: scaleY(0);
|
1508
|
-
}
|
1509
|
-
}
|
1510
|
-
@-webkit-keyframes slideOutX {
|
1511
|
-
0% {
|
1512
|
-
opacity: 1;
|
1513
|
-
-webkit-transform: scaleX(1);
|
1514
|
-
transform: scaleX(1);
|
1515
|
-
}
|
1516
|
-
100% {
|
1517
|
-
opacity: 0;
|
1518
|
-
-webkit-transform: scaleX(0);
|
1519
|
-
transform: scaleX(0);
|
809
|
+
transform: scaleY(0);
|
1520
810
|
}
|
1521
811
|
}
|
1522
812
|
@keyframes slideOutX {
|
1523
813
|
0% {
|
1524
814
|
opacity: 1;
|
1525
|
-
|
1526
|
-
transform: scaleX(1);
|
815
|
+
transform: scaleX(1);
|
1527
816
|
}
|
1528
817
|
100% {
|
1529
818
|
opacity: 0;
|
1530
|
-
|
1531
|
-
transform: scaleX(0);
|
819
|
+
transform: scaleX(0);
|
1532
820
|
}
|
1533
821
|
}
|
1534
822
|
|
@@ -1536,251 +824,118 @@
|
|
1536
824
|
Swing
|
1537
825
|
--------------- */
|
1538
826
|
.transition.swing {
|
1539
|
-
|
1540
|
-
animation-duration: 800ms;
|
827
|
+
animation-duration: 800ms;
|
1541
828
|
}
|
1542
829
|
.transition[class*="swing down"].in {
|
1543
|
-
|
1544
|
-
|
1545
|
-
-webkit-transform-origin: top center;
|
1546
|
-
transform-origin: top center;
|
830
|
+
animation-name: swingInX;
|
831
|
+
transform-origin: top center;
|
1547
832
|
}
|
1548
833
|
.transition[class*="swing up"].in {
|
1549
|
-
|
1550
|
-
|
1551
|
-
-webkit-transform-origin: bottom center;
|
1552
|
-
transform-origin: bottom center;
|
834
|
+
animation-name: swingInX;
|
835
|
+
transform-origin: bottom center;
|
1553
836
|
}
|
1554
837
|
.transition[class*="swing left"].in {
|
1555
|
-
|
1556
|
-
|
1557
|
-
-webkit-transform-origin: right center;
|
1558
|
-
transform-origin: right center;
|
838
|
+
animation-name: swingInY;
|
839
|
+
transform-origin: right center;
|
1559
840
|
}
|
1560
841
|
.transition[class*="swing right"].in {
|
1561
|
-
|
1562
|
-
|
1563
|
-
-webkit-transform-origin: left center;
|
1564
|
-
transform-origin: left center;
|
842
|
+
animation-name: swingInY;
|
843
|
+
transform-origin: left center;
|
1565
844
|
}
|
1566
845
|
.transition.swing.out,
|
1567
846
|
.transition[class*="swing down"].out {
|
1568
|
-
|
1569
|
-
|
1570
|
-
-webkit-transform-origin: top center;
|
1571
|
-
transform-origin: top center;
|
847
|
+
animation-name: swingOutX;
|
848
|
+
transform-origin: top center;
|
1572
849
|
}
|
1573
850
|
.transition[class*="swing up"].out {
|
1574
|
-
|
1575
|
-
|
1576
|
-
-webkit-transform-origin: bottom center;
|
1577
|
-
transform-origin: bottom center;
|
851
|
+
animation-name: swingOutX;
|
852
|
+
transform-origin: bottom center;
|
1578
853
|
}
|
1579
854
|
.transition[class*="swing left"].out {
|
1580
|
-
|
1581
|
-
|
1582
|
-
-webkit-transform-origin: right center;
|
1583
|
-
transform-origin: right center;
|
855
|
+
animation-name: swingOutY;
|
856
|
+
transform-origin: right center;
|
1584
857
|
}
|
1585
858
|
.transition[class*="swing right"].out {
|
1586
|
-
|
1587
|
-
|
1588
|
-
-webkit-transform-origin: left center;
|
1589
|
-
transform-origin: left center;
|
859
|
+
animation-name: swingOutY;
|
860
|
+
transform-origin: left center;
|
1590
861
|
}
|
1591
862
|
|
1592
863
|
/* In */
|
1593
|
-
@-webkit-keyframes swingInX {
|
1594
|
-
0% {
|
1595
|
-
-webkit-transform: perspective(1000px) rotateX(90deg);
|
1596
|
-
transform: perspective(1000px) rotateX(90deg);
|
1597
|
-
opacity: 0;
|
1598
|
-
}
|
1599
|
-
40% {
|
1600
|
-
-webkit-transform: perspective(1000px) rotateX(-30deg);
|
1601
|
-
transform: perspective(1000px) rotateX(-30deg);
|
1602
|
-
opacity: 1;
|
1603
|
-
}
|
1604
|
-
60% {
|
1605
|
-
-webkit-transform: perspective(1000px) rotateX(15deg);
|
1606
|
-
transform: perspective(1000px) rotateX(15deg);
|
1607
|
-
}
|
1608
|
-
80% {
|
1609
|
-
-webkit-transform: perspective(1000px) rotateX(-7.5deg);
|
1610
|
-
transform: perspective(1000px) rotateX(-7.5deg);
|
1611
|
-
}
|
1612
|
-
100% {
|
1613
|
-
-webkit-transform: perspective(1000px) rotateX(0);
|
1614
|
-
transform: perspective(1000px) rotateX(0);
|
1615
|
-
}
|
1616
|
-
}
|
1617
864
|
@keyframes swingInX {
|
1618
865
|
0% {
|
1619
|
-
|
1620
|
-
transform: perspective(1000px) rotateX(90deg);
|
866
|
+
transform: perspective(1000px) rotateX(90deg);
|
1621
867
|
opacity: 0;
|
1622
868
|
}
|
1623
869
|
40% {
|
1624
|
-
|
1625
|
-
transform: perspective(1000px) rotateX(-30deg);
|
870
|
+
transform: perspective(1000px) rotateX(-30deg);
|
1626
871
|
opacity: 1;
|
1627
872
|
}
|
1628
873
|
60% {
|
1629
|
-
|
1630
|
-
transform: perspective(1000px) rotateX(15deg);
|
874
|
+
transform: perspective(1000px) rotateX(15deg);
|
1631
875
|
}
|
1632
876
|
80% {
|
1633
|
-
|
1634
|
-
transform: perspective(1000px) rotateX(-7.5deg);
|
877
|
+
transform: perspective(1000px) rotateX(-7.5deg);
|
1635
878
|
}
|
1636
879
|
100% {
|
1637
|
-
|
1638
|
-
transform: perspective(1000px) rotateX(0);
|
1639
|
-
}
|
1640
|
-
}
|
1641
|
-
@-webkit-keyframes swingInY {
|
1642
|
-
0% {
|
1643
|
-
-webkit-transform: perspective(1000px) rotateY(-90deg);
|
1644
|
-
transform: perspective(1000px) rotateY(-90deg);
|
1645
|
-
opacity: 0;
|
1646
|
-
}
|
1647
|
-
40% {
|
1648
|
-
-webkit-transform: perspective(1000px) rotateY(30deg);
|
1649
|
-
transform: perspective(1000px) rotateY(30deg);
|
1650
|
-
opacity: 1;
|
1651
|
-
}
|
1652
|
-
60% {
|
1653
|
-
-webkit-transform: perspective(1000px) rotateY(-17.5deg);
|
1654
|
-
transform: perspective(1000px) rotateY(-17.5deg);
|
1655
|
-
}
|
1656
|
-
80% {
|
1657
|
-
-webkit-transform: perspective(1000px) rotateY(7.5deg);
|
1658
|
-
transform: perspective(1000px) rotateY(7.5deg);
|
1659
|
-
}
|
1660
|
-
100% {
|
1661
|
-
-webkit-transform: perspective(1000px) rotateY(0);
|
1662
|
-
transform: perspective(1000px) rotateY(0);
|
880
|
+
transform: perspective(1000px) rotateX(0);
|
1663
881
|
}
|
1664
882
|
}
|
1665
883
|
@keyframes swingInY {
|
1666
884
|
0% {
|
1667
|
-
|
1668
|
-
transform: perspective(1000px) rotateY(-90deg);
|
885
|
+
transform: perspective(1000px) rotateY(-90deg);
|
1669
886
|
opacity: 0;
|
1670
887
|
}
|
1671
888
|
40% {
|
1672
|
-
|
1673
|
-
transform: perspective(1000px) rotateY(30deg);
|
889
|
+
transform: perspective(1000px) rotateY(30deg);
|
1674
890
|
opacity: 1;
|
1675
891
|
}
|
1676
892
|
60% {
|
1677
|
-
|
1678
|
-
transform: perspective(1000px) rotateY(-17.5deg);
|
893
|
+
transform: perspective(1000px) rotateY(-17.5deg);
|
1679
894
|
}
|
1680
895
|
80% {
|
1681
|
-
|
1682
|
-
transform: perspective(1000px) rotateY(7.5deg);
|
896
|
+
transform: perspective(1000px) rotateY(7.5deg);
|
1683
897
|
}
|
1684
898
|
100% {
|
1685
|
-
|
1686
|
-
transform: perspective(1000px) rotateY(0);
|
899
|
+
transform: perspective(1000px) rotateY(0);
|
1687
900
|
}
|
1688
901
|
}
|
1689
902
|
|
1690
903
|
/* Out */
|
1691
|
-
@-webkit-keyframes swingOutX {
|
1692
|
-
0% {
|
1693
|
-
-webkit-transform: perspective(1000px) rotateX(0);
|
1694
|
-
transform: perspective(1000px) rotateX(0);
|
1695
|
-
}
|
1696
|
-
40% {
|
1697
|
-
-webkit-transform: perspective(1000px) rotateX(-7.5deg);
|
1698
|
-
transform: perspective(1000px) rotateX(-7.5deg);
|
1699
|
-
}
|
1700
|
-
60% {
|
1701
|
-
-webkit-transform: perspective(1000px) rotateX(17.5deg);
|
1702
|
-
transform: perspective(1000px) rotateX(17.5deg);
|
1703
|
-
}
|
1704
|
-
80% {
|
1705
|
-
-webkit-transform: perspective(1000px) rotateX(-30deg);
|
1706
|
-
transform: perspective(1000px) rotateX(-30deg);
|
1707
|
-
opacity: 1;
|
1708
|
-
}
|
1709
|
-
100% {
|
1710
|
-
-webkit-transform: perspective(1000px) rotateX(90deg);
|
1711
|
-
transform: perspective(1000px) rotateX(90deg);
|
1712
|
-
opacity: 0;
|
1713
|
-
}
|
1714
|
-
}
|
1715
904
|
@keyframes swingOutX {
|
1716
905
|
0% {
|
1717
|
-
|
1718
|
-
transform: perspective(1000px) rotateX(0);
|
906
|
+
transform: perspective(1000px) rotateX(0);
|
1719
907
|
}
|
1720
908
|
40% {
|
1721
|
-
|
1722
|
-
transform: perspective(1000px) rotateX(-7.5deg);
|
909
|
+
transform: perspective(1000px) rotateX(-7.5deg);
|
1723
910
|
}
|
1724
911
|
60% {
|
1725
|
-
|
1726
|
-
transform: perspective(1000px) rotateX(17.5deg);
|
912
|
+
transform: perspective(1000px) rotateX(17.5deg);
|
1727
913
|
}
|
1728
914
|
80% {
|
1729
|
-
|
1730
|
-
transform: perspective(1000px) rotateX(-30deg);
|
915
|
+
transform: perspective(1000px) rotateX(-30deg);
|
1731
916
|
opacity: 1;
|
1732
917
|
}
|
1733
918
|
100% {
|
1734
|
-
|
1735
|
-
transform: perspective(1000px) rotateX(90deg);
|
1736
|
-
opacity: 0;
|
1737
|
-
}
|
1738
|
-
}
|
1739
|
-
@-webkit-keyframes swingOutY {
|
1740
|
-
0% {
|
1741
|
-
-webkit-transform: perspective(1000px) rotateY(0);
|
1742
|
-
transform: perspective(1000px) rotateY(0);
|
1743
|
-
}
|
1744
|
-
40% {
|
1745
|
-
-webkit-transform: perspective(1000px) rotateY(7.5deg);
|
1746
|
-
transform: perspective(1000px) rotateY(7.5deg);
|
1747
|
-
}
|
1748
|
-
60% {
|
1749
|
-
-webkit-transform: perspective(1000px) rotateY(-10deg);
|
1750
|
-
transform: perspective(1000px) rotateY(-10deg);
|
1751
|
-
}
|
1752
|
-
80% {
|
1753
|
-
-webkit-transform: perspective(1000px) rotateY(30deg);
|
1754
|
-
transform: perspective(1000px) rotateY(30deg);
|
1755
|
-
opacity: 1;
|
1756
|
-
}
|
1757
|
-
100% {
|
1758
|
-
-webkit-transform: perspective(1000px) rotateY(-90deg);
|
1759
|
-
transform: perspective(1000px) rotateY(-90deg);
|
919
|
+
transform: perspective(1000px) rotateX(90deg);
|
1760
920
|
opacity: 0;
|
1761
921
|
}
|
1762
922
|
}
|
1763
923
|
@keyframes swingOutY {
|
1764
924
|
0% {
|
1765
|
-
|
1766
|
-
transform: perspective(1000px) rotateY(0);
|
925
|
+
transform: perspective(1000px) rotateY(0);
|
1767
926
|
}
|
1768
927
|
40% {
|
1769
|
-
|
1770
|
-
transform: perspective(1000px) rotateY(7.5deg);
|
928
|
+
transform: perspective(1000px) rotateY(7.5deg);
|
1771
929
|
}
|
1772
930
|
60% {
|
1773
|
-
|
1774
|
-
transform: perspective(1000px) rotateY(-10deg);
|
931
|
+
transform: perspective(1000px) rotateY(-10deg);
|
1775
932
|
}
|
1776
933
|
80% {
|
1777
|
-
|
1778
|
-
transform: perspective(1000px) rotateY(30deg);
|
934
|
+
transform: perspective(1000px) rotateY(30deg);
|
1779
935
|
opacity: 1;
|
1780
936
|
}
|
1781
937
|
100% {
|
1782
|
-
|
1783
|
-
transform: perspective(1000px) rotateY(-90deg);
|
938
|
+
transform: perspective(1000px) rotateY(-90deg);
|
1784
939
|
opacity: 0;
|
1785
940
|
}
|
1786
941
|
}
|
@@ -1789,59 +944,29 @@
|
|
1789
944
|
Zoom
|
1790
945
|
--------------- */
|
1791
946
|
.transition.zoom.in {
|
1792
|
-
|
1793
|
-
animation-name: zoomIn;
|
947
|
+
animation-name: zoomIn;
|
1794
948
|
}
|
1795
949
|
.transition.zoom.out {
|
1796
|
-
|
1797
|
-
animation-name: zoomOut;
|
1798
|
-
}
|
1799
|
-
@-webkit-keyframes zoomIn {
|
1800
|
-
0% {
|
1801
|
-
opacity: 1;
|
1802
|
-
-webkit-transform: scale(0);
|
1803
|
-
transform: scale(0);
|
1804
|
-
}
|
1805
|
-
100% {
|
1806
|
-
opacity: 1;
|
1807
|
-
-webkit-transform: scale(1);
|
1808
|
-
transform: scale(1);
|
1809
|
-
}
|
950
|
+
animation-name: zoomOut;
|
1810
951
|
}
|
1811
952
|
@keyframes zoomIn {
|
1812
953
|
0% {
|
1813
954
|
opacity: 1;
|
1814
|
-
|
1815
|
-
transform: scale(0);
|
1816
|
-
}
|
1817
|
-
100% {
|
1818
|
-
opacity: 1;
|
1819
|
-
-webkit-transform: scale(1);
|
1820
|
-
transform: scale(1);
|
1821
|
-
}
|
1822
|
-
}
|
1823
|
-
@-webkit-keyframes zoomOut {
|
1824
|
-
0% {
|
1825
|
-
opacity: 1;
|
1826
|
-
-webkit-transform: scale(1);
|
1827
|
-
transform: scale(1);
|
955
|
+
transform: scale(0);
|
1828
956
|
}
|
1829
957
|
100% {
|
1830
958
|
opacity: 1;
|
1831
|
-
|
1832
|
-
transform: scale(0);
|
959
|
+
transform: scale(1);
|
1833
960
|
}
|
1834
961
|
}
|
1835
962
|
@keyframes zoomOut {
|
1836
963
|
0% {
|
1837
964
|
opacity: 1;
|
1838
|
-
|
1839
|
-
transform: scale(1);
|
965
|
+
transform: scale(1);
|
1840
966
|
}
|
1841
967
|
100% {
|
1842
968
|
opacity: 1;
|
1843
|
-
|
1844
|
-
transform: scale(0);
|
969
|
+
transform: scale(0);
|
1845
970
|
}
|
1846
971
|
}
|
1847
972
|
|
@@ -1855,64 +980,38 @@
|
|
1855
980
|
Emphasis
|
1856
981
|
--------------- */
|
1857
982
|
.flash.transition {
|
1858
|
-
|
1859
|
-
|
1860
|
-
-webkit-animation-name: flash;
|
1861
|
-
animation-name: flash;
|
983
|
+
animation-duration: 750ms;
|
984
|
+
animation-name: flash;
|
1862
985
|
}
|
1863
986
|
.shake.transition {
|
1864
|
-
|
1865
|
-
|
1866
|
-
-webkit-animation-name: shake;
|
1867
|
-
animation-name: shake;
|
987
|
+
animation-duration: 750ms;
|
988
|
+
animation-name: shake;
|
1868
989
|
}
|
1869
990
|
.bounce.transition {
|
1870
|
-
|
1871
|
-
|
1872
|
-
-webkit-animation-name: bounce;
|
1873
|
-
animation-name: bounce;
|
991
|
+
animation-duration: 750ms;
|
992
|
+
animation-name: bounce;
|
1874
993
|
}
|
1875
994
|
.tada.transition {
|
1876
|
-
|
1877
|
-
|
1878
|
-
-webkit-animation-name: tada;
|
1879
|
-
animation-name: tada;
|
995
|
+
animation-duration: 750ms;
|
996
|
+
animation-name: tada;
|
1880
997
|
}
|
1881
998
|
.pulse.transition {
|
1882
|
-
|
1883
|
-
|
1884
|
-
-webkit-animation-name: pulse;
|
1885
|
-
animation-name: pulse;
|
999
|
+
animation-duration: 500ms;
|
1000
|
+
animation-name: pulse;
|
1886
1001
|
}
|
1887
1002
|
.jiggle.transition {
|
1888
|
-
|
1889
|
-
|
1890
|
-
-webkit-animation-name: jiggle;
|
1891
|
-
animation-name: jiggle;
|
1003
|
+
animation-duration: 750ms;
|
1004
|
+
animation-name: jiggle;
|
1892
1005
|
}
|
1893
1006
|
.transition.glow {
|
1894
|
-
|
1895
|
-
|
1896
|
-
-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
1897
|
-
animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
1007
|
+
animation-duration: 2000ms;
|
1008
|
+
animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
1898
1009
|
}
|
1899
1010
|
.transition.glow {
|
1900
|
-
|
1901
|
-
animation-name: glow;
|
1011
|
+
animation-name: glow;
|
1902
1012
|
}
|
1903
1013
|
|
1904
1014
|
/* Flash */
|
1905
|
-
@-webkit-keyframes flash {
|
1906
|
-
0%,
|
1907
|
-
50%,
|
1908
|
-
100% {
|
1909
|
-
opacity: 1;
|
1910
|
-
}
|
1911
|
-
25%,
|
1912
|
-
75% {
|
1913
|
-
opacity: 0;
|
1914
|
-
}
|
1915
|
-
}
|
1916
1015
|
@keyframes flash {
|
1917
1016
|
0%,
|
1918
1017
|
50%,
|
@@ -1926,257 +1025,110 @@
|
|
1926
1025
|
}
|
1927
1026
|
|
1928
1027
|
/* Shake */
|
1929
|
-
@-webkit-keyframes shake {
|
1930
|
-
0%,
|
1931
|
-
100% {
|
1932
|
-
-webkit-transform: translateX(0);
|
1933
|
-
transform: translateX(0);
|
1934
|
-
}
|
1935
|
-
10%,
|
1936
|
-
30%,
|
1937
|
-
50%,
|
1938
|
-
70%,
|
1939
|
-
90% {
|
1940
|
-
-webkit-transform: translateX(-10px);
|
1941
|
-
transform: translateX(-10px);
|
1942
|
-
}
|
1943
|
-
20%,
|
1944
|
-
40%,
|
1945
|
-
60%,
|
1946
|
-
80% {
|
1947
|
-
-webkit-transform: translateX(10px);
|
1948
|
-
transform: translateX(10px);
|
1949
|
-
}
|
1950
|
-
}
|
1951
1028
|
@keyframes shake {
|
1952
1029
|
0%,
|
1953
1030
|
100% {
|
1954
|
-
|
1955
|
-
transform: translateX(0);
|
1031
|
+
transform: translateX(0);
|
1956
1032
|
}
|
1957
1033
|
10%,
|
1958
1034
|
30%,
|
1959
1035
|
50%,
|
1960
1036
|
70%,
|
1961
1037
|
90% {
|
1962
|
-
|
1963
|
-
transform: translateX(-10px);
|
1038
|
+
transform: translateX(-10px);
|
1964
1039
|
}
|
1965
1040
|
20%,
|
1966
1041
|
40%,
|
1967
1042
|
60%,
|
1968
1043
|
80% {
|
1969
|
-
|
1970
|
-
transform: translateX(10px);
|
1044
|
+
transform: translateX(10px);
|
1971
1045
|
}
|
1972
1046
|
}
|
1973
1047
|
|
1974
1048
|
/* Bounce */
|
1975
|
-
@-webkit-keyframes bounce {
|
1976
|
-
0%,
|
1977
|
-
20%,
|
1978
|
-
50%,
|
1979
|
-
80%,
|
1980
|
-
100% {
|
1981
|
-
-webkit-transform: translateY(0);
|
1982
|
-
transform: translateY(0);
|
1983
|
-
}
|
1984
|
-
40% {
|
1985
|
-
-webkit-transform: translateY(-30px);
|
1986
|
-
transform: translateY(-30px);
|
1987
|
-
}
|
1988
|
-
60% {
|
1989
|
-
-webkit-transform: translateY(-15px);
|
1990
|
-
transform: translateY(-15px);
|
1991
|
-
}
|
1992
|
-
}
|
1993
1049
|
@keyframes bounce {
|
1994
1050
|
0%,
|
1995
1051
|
20%,
|
1996
1052
|
50%,
|
1997
1053
|
80%,
|
1998
1054
|
100% {
|
1999
|
-
|
2000
|
-
transform: translateY(0);
|
1055
|
+
transform: translateY(0);
|
2001
1056
|
}
|
2002
1057
|
40% {
|
2003
|
-
|
2004
|
-
transform: translateY(-30px);
|
1058
|
+
transform: translateY(-30px);
|
2005
1059
|
}
|
2006
1060
|
60% {
|
2007
|
-
|
2008
|
-
transform: translateY(-15px);
|
1061
|
+
transform: translateY(-15px);
|
2009
1062
|
}
|
2010
1063
|
}
|
2011
1064
|
|
2012
1065
|
/* Tada */
|
2013
|
-
@-webkit-keyframes tada {
|
2014
|
-
0% {
|
2015
|
-
-webkit-transform: scale(1);
|
2016
|
-
transform: scale(1);
|
2017
|
-
}
|
2018
|
-
10%,
|
2019
|
-
20% {
|
2020
|
-
-webkit-transform: scale(0.9) rotate(-3deg);
|
2021
|
-
transform: scale(0.9) rotate(-3deg);
|
2022
|
-
}
|
2023
|
-
30%,
|
2024
|
-
50%,
|
2025
|
-
70%,
|
2026
|
-
90% {
|
2027
|
-
-webkit-transform: scale(1.1) rotate(3deg);
|
2028
|
-
transform: scale(1.1) rotate(3deg);
|
2029
|
-
}
|
2030
|
-
40%,
|
2031
|
-
60%,
|
2032
|
-
80% {
|
2033
|
-
-webkit-transform: scale(1.1) rotate(-3deg);
|
2034
|
-
transform: scale(1.1) rotate(-3deg);
|
2035
|
-
}
|
2036
|
-
100% {
|
2037
|
-
-webkit-transform: scale(1) rotate(0);
|
2038
|
-
transform: scale(1) rotate(0);
|
2039
|
-
}
|
2040
|
-
}
|
2041
1066
|
@keyframes tada {
|
2042
1067
|
0% {
|
2043
|
-
|
2044
|
-
transform: scale(1);
|
1068
|
+
transform: scale(1);
|
2045
1069
|
}
|
2046
1070
|
10%,
|
2047
1071
|
20% {
|
2048
|
-
|
2049
|
-
transform: scale(0.9) rotate(-3deg);
|
1072
|
+
transform: scale(0.9) rotate(-3deg);
|
2050
1073
|
}
|
2051
1074
|
30%,
|
2052
1075
|
50%,
|
2053
1076
|
70%,
|
2054
1077
|
90% {
|
2055
|
-
|
2056
|
-
transform: scale(1.1) rotate(3deg);
|
1078
|
+
transform: scale(1.1) rotate(3deg);
|
2057
1079
|
}
|
2058
1080
|
40%,
|
2059
1081
|
60%,
|
2060
1082
|
80% {
|
2061
|
-
|
2062
|
-
transform: scale(1.1) rotate(-3deg);
|
1083
|
+
transform: scale(1.1) rotate(-3deg);
|
2063
1084
|
}
|
2064
1085
|
100% {
|
2065
|
-
|
2066
|
-
transform: scale(1) rotate(0);
|
1086
|
+
transform: scale(1) rotate(0);
|
2067
1087
|
}
|
2068
1088
|
}
|
2069
1089
|
|
2070
1090
|
/* Pulse */
|
2071
|
-
@-webkit-keyframes pulse {
|
2072
|
-
0% {
|
2073
|
-
-webkit-transform: scale(1);
|
2074
|
-
transform: scale(1);
|
2075
|
-
opacity: 1;
|
2076
|
-
}
|
2077
|
-
50% {
|
2078
|
-
-webkit-transform: scale(0.9);
|
2079
|
-
transform: scale(0.9);
|
2080
|
-
opacity: 0.7;
|
2081
|
-
}
|
2082
|
-
100% {
|
2083
|
-
-webkit-transform: scale(1);
|
2084
|
-
transform: scale(1);
|
2085
|
-
opacity: 1;
|
2086
|
-
}
|
2087
|
-
}
|
2088
1091
|
@keyframes pulse {
|
2089
1092
|
0% {
|
2090
|
-
|
2091
|
-
transform: scale(1);
|
1093
|
+
transform: scale(1);
|
2092
1094
|
opacity: 1;
|
2093
1095
|
}
|
2094
1096
|
50% {
|
2095
|
-
|
2096
|
-
transform: scale(0.9);
|
1097
|
+
transform: scale(0.9);
|
2097
1098
|
opacity: 0.7;
|
2098
1099
|
}
|
2099
1100
|
100% {
|
2100
|
-
|
2101
|
-
transform: scale(1);
|
1101
|
+
transform: scale(1);
|
2102
1102
|
opacity: 1;
|
2103
1103
|
}
|
2104
1104
|
}
|
2105
1105
|
|
2106
1106
|
/* Jiggle */
|
2107
|
-
@-webkit-keyframes jiggle {
|
2108
|
-
0% {
|
2109
|
-
-webkit-transform: scale3d(1, 1, 1);
|
2110
|
-
transform: scale3d(1, 1, 1);
|
2111
|
-
}
|
2112
|
-
30% {
|
2113
|
-
-webkit-transform: scale3d(1.25, 0.75, 1);
|
2114
|
-
transform: scale3d(1.25, 0.75, 1);
|
2115
|
-
}
|
2116
|
-
40% {
|
2117
|
-
-webkit-transform: scale3d(0.75, 1.25, 1);
|
2118
|
-
transform: scale3d(0.75, 1.25, 1);
|
2119
|
-
}
|
2120
|
-
50% {
|
2121
|
-
-webkit-transform: scale3d(1.15, 0.85, 1);
|
2122
|
-
transform: scale3d(1.15, 0.85, 1);
|
2123
|
-
}
|
2124
|
-
65% {
|
2125
|
-
-webkit-transform: scale3d(0.95, 1.05, 1);
|
2126
|
-
transform: scale3d(0.95, 1.05, 1);
|
2127
|
-
}
|
2128
|
-
75% {
|
2129
|
-
-webkit-transform: scale3d(1.05, 0.95, 1);
|
2130
|
-
transform: scale3d(1.05, 0.95, 1);
|
2131
|
-
}
|
2132
|
-
100% {
|
2133
|
-
-webkit-transform: scale3d(1, 1, 1);
|
2134
|
-
transform: scale3d(1, 1, 1);
|
2135
|
-
}
|
2136
|
-
}
|
2137
1107
|
@keyframes jiggle {
|
2138
1108
|
0% {
|
2139
|
-
|
2140
|
-
transform: scale3d(1, 1, 1);
|
1109
|
+
transform: scale3d(1, 1, 1);
|
2141
1110
|
}
|
2142
1111
|
30% {
|
2143
|
-
|
2144
|
-
transform: scale3d(1.25, 0.75, 1);
|
1112
|
+
transform: scale3d(1.25, 0.75, 1);
|
2145
1113
|
}
|
2146
1114
|
40% {
|
2147
|
-
|
2148
|
-
transform: scale3d(0.75, 1.25, 1);
|
1115
|
+
transform: scale3d(0.75, 1.25, 1);
|
2149
1116
|
}
|
2150
1117
|
50% {
|
2151
|
-
|
2152
|
-
transform: scale3d(1.15, 0.85, 1);
|
1118
|
+
transform: scale3d(1.15, 0.85, 1);
|
2153
1119
|
}
|
2154
1120
|
65% {
|
2155
|
-
|
2156
|
-
transform: scale3d(0.95, 1.05, 1);
|
1121
|
+
transform: scale3d(0.95, 1.05, 1);
|
2157
1122
|
}
|
2158
1123
|
75% {
|
2159
|
-
|
2160
|
-
transform: scale3d(1.05, 0.95, 1);
|
1124
|
+
transform: scale3d(1.05, 0.95, 1);
|
2161
1125
|
}
|
2162
1126
|
100% {
|
2163
|
-
|
2164
|
-
transform: scale3d(1, 1, 1);
|
1127
|
+
transform: scale3d(1, 1, 1);
|
2165
1128
|
}
|
2166
1129
|
}
|
2167
1130
|
|
2168
1131
|
/* Glow */
|
2169
|
-
@-webkit-keyframes glow {
|
2170
|
-
0% {
|
2171
|
-
background-color: #fcfcfd;
|
2172
|
-
}
|
2173
|
-
30% {
|
2174
|
-
background-color: #fff6cd;
|
2175
|
-
}
|
2176
|
-
100% {
|
2177
|
-
background-color: #fcfcfd;
|
2178
|
-
}
|
2179
|
-
}
|
2180
1132
|
@keyframes glow {
|
2181
1133
|
0% {
|
2182
1134
|
background-color: #fcfcfd;
|