├── img
├── stars.png
├── clouds3.png
├── favicon.ico
└── twinkling.png
├── README.md
├── index.html
├── css
├── style.css
├── flipclock.css
└── animate.css
└── js
├── newyear.js
└── flipclock.js
/img/stars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0x48piraj/countdown/HEAD/img/stars.png
--------------------------------------------------------------------------------
/img/clouds3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0x48piraj/countdown/HEAD/img/clouds3.png
--------------------------------------------------------------------------------
/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0x48piraj/countdown/HEAD/img/favicon.ico
--------------------------------------------------------------------------------
/img/twinkling.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/0x48piraj/countdown/HEAD/img/twinkling.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # New Year Countdown
2 | > New Year Countdown to throw on a big screen for the New Year's Eve with FOSSASIA ! :tada:
3 |
4 | [](http://hits.dwyl.io/0x48piraj/countdown-2018)
5 |
6 |
7 | 
8 | Demo → https://0x48piraj.github.io/countdown/
9 |
10 | Heads up for easter eggs.
11 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Happy New Year
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 | Happy New Year
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | margin: 0;
3 | padding: 0;
4 | width: 100%;
5 | height: 100%;
6 | overflow: hidden;
7 | }
8 | *
9 | {
10 | margin: 0;
11 | padding: 0;
12 |
13 | }
14 | .message
15 | {
16 | font-family: 'Great Vibes', cursive;
17 | color: white;
18 | position: absolute;
19 | font-size: 95px;
20 | top:0;
21 | left:0;
22 | right:0;
23 | bottom:0;
24 | width: 100%;
25 | height:200px;
26 | z-index: 50;
27 | margin: auto auto;
28 | line-height: 200px;
29 | text-align: center;
30 | display: none;
31 | }
32 | canvas {
33 | display: block;
34 | overflow: hidden;
35 | width: 100%;
36 | height: 100%;
37 | z-index: 100;
38 | position: absolute;
39 | }
40 |
41 | #confetti
42 | {
43 | display: none;
44 | }
45 |
46 | @keyframes move-twink-back {
47 | from {background-position:0 0;}
48 | to {background-position:-10000px 5000px;}
49 | }
50 | @-webkit-keyframes move-twink-back {
51 | from {background-position:0 0;}
52 | to {background-position:-10000px 5000px;}
53 | }
54 | @-moz-keyframes move-twink-back {
55 | from {background-position:0 0;}
56 | to {background-position:-10000px 5000px;}
57 | }
58 | @-ms-keyframes move-twink-back {
59 | from {background-position:0 0;}
60 | to {background-position:-10000px 5000px;}
61 | }
62 |
63 | @keyframes move-clouds-back {
64 | from {background-position:0 0;}
65 | to {background-position:10000px 0;}
66 | }
67 | @-webkit-keyframes move-clouds-back {
68 | from {background-position:0 0;}
69 | to {background-position:10000px 0;}
70 | }
71 | @-moz-keyframes move-clouds-back {
72 | from {background-position:0 0;}
73 | to {background-position:10000px 0;}
74 | }
75 | @-ms-keyframes move-clouds-back {
76 | from {background-position: 0;}
77 | to {background-position:10000px 0;}
78 | }
79 |
80 | .stars, .twinkling, .clouds {
81 | position:absolute;
82 | top:0;
83 | left:0;
84 | right:0;
85 | bottom:0;
86 | width:100%;
87 | height:100%;
88 | display:block;
89 | }
90 |
91 | .stars {
92 | background:#000 url(../img/stars.png) repeat top center;
93 | z-index:0;
94 | }
95 |
96 | .twinkling{
97 | background:transparent url(../img/twinkling.png) repeat top center;
98 | z-index:1;
99 |
100 | -moz-animation:move-twink-back 200s linear infinite;
101 | -ms-animation:move-twink-back 200s linear infinite;
102 | -o-animation:move-twink-back 200s linear infinite;
103 | -webkit-animation:move-twink-back 200s linear infinite;
104 | animation:move-twink-back 200s linear infinite;
105 | }
106 |
107 | .clouds{
108 | background:transparent url(../img/clouds3.png) repeat top center;
109 | z-index:3;
110 |
111 | -moz-animation:move-clouds-back 200s linear infinite;
112 | -ms-animation:move-clouds-back 200s linear infinite;
113 | -o-animation:move-clouds-back 200s linear infinite;
114 | -webkit-animation:move-clouds-back 200s linear infinite;
115 | animation:move-clouds-back 200s linear infinite;
116 | }
--------------------------------------------------------------------------------
/js/newyear.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;
3 |
4 | NUM_CONFETTI = 350;
5 |
6 | COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
7 |
8 | PI_2 = 2 * Math.PI;
9 |
10 | canvas = document.getElementById("confetti");
11 | context = canvas.getContext("2d");
12 |
13 | window.w = 0;
14 | window.h = 0;
15 |
16 | resizeWindow = function() {
17 | window.w = canvas.width = window.innerWidth;
18 | return window.h = canvas.height = window.innerHeight;
19 | };
20 |
21 | window.addEventListener('resize', resizeWindow, false);
22 |
23 | window.onload = function() {
24 | return setTimeout(resizeWindow, 0);
25 | };
26 |
27 | range = function(a, b) {
28 | return (b - a) * Math.random() + a;
29 | };
30 |
31 | drawCircle = function(x, y, r, style) {
32 | context.beginPath();
33 | context.arc(x, y, r, 0, PI_2, false);
34 | context.fillStyle = style;
35 | return context.fill();
36 | };
37 |
38 | xpos = 0.4;
39 |
40 | document.onmousemove = function(e) {
41 | return xpos = e.pageX / w;
42 | };
43 |
44 | window.requestAnimationFrame = (function() {
45 | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
46 | return window.setTimeout(callback, 1000 / 60);
47 | };
48 | })();
49 |
50 | Confetti = (function() {
51 | function Confetti() {
52 | this.style = COLORS[~~range(0, 5)];
53 | this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
54 | this.r = ~~range(2, 6);
55 | this.r2 = 2 * this.r;
56 | this.replace();
57 | }
58 |
59 | Confetti.prototype.replace = function() {
60 | this.opacity = 0;
61 | this.dop = 0.03 * range(1, 4);
62 | this.x = range(-this.r2, w - this.r2);
63 | this.y = range(-20, h - this.r2);
64 | this.xmax = w - this.r;
65 | this.ymax = h - this.r;
66 | this.vx = range(0, 2) + 8 * xpos - 5;
67 | return this.vy = 0.7 * this.r + range(-1, 1);
68 | };
69 |
70 | Confetti.prototype.draw = function() {
71 | var _ref;
72 | this.x += this.vx;
73 | this.y += this.vy;
74 | this.opacity += this.dop;
75 | if (this.opacity > 1) {
76 | this.opacity = 1;
77 | this.dop *= -1;
78 | }
79 | if (this.opacity < 0 || this.y > this.ymax) {
80 | this.replace();
81 | }
82 | if (!((0 < (_ref = this.x) && _ref < this.xmax))) {
83 | this.x = (this.x + this.xmax) % this.xmax;
84 | }
85 | return drawCircle(~~this.x, ~~this.y, this.r, "" + this.rgb + "," + this.opacity + ")");
86 | };
87 |
88 | return Confetti;
89 |
90 | })();
91 |
92 | confetti = (function() {
93 | var _i, _results;
94 | _results = [];
95 | for (i = _i = 1; 1 <= NUM_CONFETTI ? _i <= NUM_CONFETTI : _i >= NUM_CONFETTI; i = 1 <= NUM_CONFETTI ? ++_i : --_i) {
96 | _results.push(new Confetti);
97 | }
98 | return _results;
99 | })();
100 |
101 | window.step = function() {
102 | var c, _i, _len, _results;
103 | requestAnimationFrame(step);
104 | context.clearRect(0, 0, w, h);
105 | _results = [];
106 | for (_i = 0, _len = confetti.length; _i < _len; _i++) {
107 | c = confetti[_i];
108 | _results.push(c.draw());
109 | }
110 | return _results;
111 | };
112 |
113 | step();
114 |
115 | }).call(this);
116 |
117 | var clock;
118 | var $clock = $('.clock');
119 | var $message = $('.message');
120 | var $confetti = $('#confetti');
121 | var animations = ['bounce', 'pulse', 'rubberBand', 'swing', 'tada'];
122 | var current_animation = 0;
123 | var timeout = null;
124 | var interval = 10000;
125 |
126 | $(document).ready(function() {
127 | var currentDate = new Date();
128 | var futureDate = new Date(currentDate.getFullYear() + 1, 0, 1);
129 | var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
130 |
131 | clock = $clock.FlipClock(diff, {
132 | clockFace: 'DailyCounter',
133 | countdown: true,
134 | callbacks: {
135 | interval: function() {
136 | var time = this.factory.getTime().time;
137 | if(time <= 10 && time > 0) {
138 | pulse();
139 | }
140 | else if(time <= 0) {
141 | celebrate();
142 | }
143 | }
144 | }
145 | });
146 | });
147 |
148 | function celebrate()
149 | {
150 | $confetti.fadeIn();
151 |
152 | $clock.removeClass('animated flipInX');
153 | $clock.addClass('animated flipOutX');
154 |
155 | clearTimeout(timeout);
156 | setTimeout(function(){
157 | $message.addClass('animated flipInX').fadeIn();
158 | timeout = setTimeout(bounce, interval);
159 | }, 350);
160 | }
161 |
162 | function pulse()
163 | {
164 | $clock.removeClass('animated flipInX flipOutX pulse');
165 |
166 | clearTimeout(timeout);
167 | timeout = setTimeout(function(){
168 | $clock.addClass('animated pulse');
169 | }, 50);
170 | }
171 |
172 | function bounce()
173 | {
174 | clearTimeout(timeout);
175 |
176 | $message.removeClass('animated bounce flipInX pulse rubberBand swing tada');
177 |
178 | setTimeout(function(){
179 | $message.addClass('animated ' + animations[current_animation]);
180 | current_animation++;
181 | if(current_animation == animations.length)
182 | {
183 | current_animation = 0;
184 | }
185 | }, 100);
186 |
187 | timeout = setTimeout(bounce, interval);
188 | }
--------------------------------------------------------------------------------
/css/flipclock.css:
--------------------------------------------------------------------------------
1 | /* Get the bourbon mixin from http://bourbon.io */
2 | /* Reset */
3 | .flip-clock-wrapper * {
4 | -webkit-box-sizing: border-box;
5 | -moz-box-sizing: border-box;
6 | -ms-box-sizing: border-box;
7 | -o-box-sizing: border-box;
8 | box-sizing: border-box;
9 | -webkit-backface-visibility: hidden;
10 | -moz-backface-visibility: hidden;
11 | -ms-backface-visibility: hidden;
12 | -o-backface-visibility: hidden;
13 | backface-visibility: hidden;
14 | }
15 |
16 | .flip-clock-wrapper a {
17 | cursor: pointer;
18 | text-decoration: none;
19 | color: #ccc; }
20 |
21 | .flip-clock-wrapper a:hover {
22 | color: #fff; }
23 |
24 | .flip-clock-wrapper ul {
25 | list-style: none; }
26 |
27 | .flip-clock-wrapper.clearfix:before,
28 | .flip-clock-wrapper.clearfix:after {
29 | content: " ";
30 | display: table; }
31 |
32 | .flip-clock-wrapper.clearfix:after {
33 | clear: both; }
34 |
35 | .flip-clock-wrapper.clearfix {
36 | *zoom: 1; }
37 |
38 | /* Main */
39 | .flip-clock-wrapper {
40 | font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
41 | color: #555;
42 | z-index: 10;
43 | -webkit-user-select: none; }
44 |
45 | .flip-clock-meridium {
46 | background: none !important;
47 | box-shadow: 0 0 0 !important;
48 | font-size: 36px !important; }
49 |
50 | .flip-clock-meridium a { color: #313333; }
51 |
52 | .flip-clock-wrapper {
53 | text-align: center;
54 | width: 690px;
55 | margin: 0 auto;
56 | height: 100px;
57 | position: absolute;
58 | top: 0;
59 | bottom: 0;
60 | left: 0;
61 | right: 0;
62 | margin: auto;
63 | }
64 |
65 | .flip-clock-wrapper:before,
66 | .flip-clock-wrapper:after {
67 | content: " "; /* 1 */
68 | display: table; /* 2 */
69 | }
70 | .flip-clock-wrapper:after {
71 | clear: both;
72 | }
73 |
74 | /* Skeleton */
75 | .flip-clock-wrapper ul {
76 | position: relative;
77 | float: left;
78 | margin: 5px;
79 | width: 60px;
80 | height: 90px;
81 | font-size: 80px;
82 | font-weight: bold;
83 | line-height: 87px;
84 | border-radius: 6px;
85 | background: #000;
86 | }
87 |
88 | .flip-clock-wrapper ul li {
89 | z-index: 1;
90 | position: absolute;
91 | left: 0;
92 | top: 0;
93 | width: 100%;
94 | height: 100%;
95 | line-height: 87px;
96 | text-decoration: none !important;
97 | }
98 |
99 | .flip-clock-wrapper ul li:first-child {
100 | z-index: 2; }
101 |
102 | .flip-clock-wrapper ul li a {
103 | display: block;
104 | height: 100%;
105 | -webkit-perspective: 200px;
106 | -moz-perspective: 200px;
107 | perspective: 200px;
108 | margin: 0 !important;
109 | overflow: visible !important;
110 | cursor: default !important; }
111 |
112 | .flip-clock-wrapper ul li a div {
113 | z-index: 1;
114 | position: absolute;
115 | left: 0;
116 | width: 100%;
117 | height: 50%;
118 | font-size: 80px;
119 | overflow: hidden;
120 | outline: 1px solid transparent; }
121 |
122 | .flip-clock-wrapper ul li a div .shadow {
123 | position: absolute;
124 | width: 100%;
125 | height: 100%;
126 | z-index: 2; }
127 |
128 | .flip-clock-wrapper ul li a div.up {
129 | -webkit-transform-origin: 50% 100%;
130 | -moz-transform-origin: 50% 100%;
131 | -ms-transform-origin: 50% 100%;
132 | -o-transform-origin: 50% 100%;
133 | transform-origin: 50% 100%;
134 | top: 0; }
135 |
136 | .flip-clock-wrapper ul li a div.up:after {
137 | content: "";
138 | position: absolute;
139 | top: 44px;
140 | left: 0;
141 | z-index: 5;
142 | width: 100%;
143 | height: 3px;
144 | background-color: #000;
145 | background-color: rgba(0, 0, 0, 0.4); }
146 |
147 | .flip-clock-wrapper ul li a div.down {
148 | -webkit-transform-origin: 50% 0;
149 | -moz-transform-origin: 50% 0;
150 | -ms-transform-origin: 50% 0;
151 | -o-transform-origin: 50% 0;
152 | transform-origin: 50% 0;
153 | bottom: 0;
154 | border-bottom-left-radius: 6px;
155 | border-bottom-right-radius: 6px;
156 | }
157 |
158 | .flip-clock-wrapper ul li a div div.inn {
159 | position: absolute;
160 | left: 0;
161 | z-index: 1;
162 | width: 100%;
163 | height: 200%;
164 | color: #ccc;
165 | text-shadow: 0 1px 2px #000;
166 | text-align: center;
167 | background-color: #333;
168 | border-radius: 6px;
169 | font-size: 70px; }
170 |
171 | .flip-clock-wrapper ul li a div.up div.inn {
172 | top: 0; }
173 |
174 | .flip-clock-wrapper ul li a div.down div.inn {
175 | bottom: 0; }
176 |
177 | /* PLAY */
178 | .flip-clock-wrapper ul.play li.flip-clock-before {
179 | z-index: 3; }
180 |
181 | .flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
182 |
183 | .flip-clock-wrapper ul.play li.flip-clock-active {
184 | -webkit-animation: asd 0.5s 0.5s linear both;
185 | -moz-animation: asd 0.5s 0.5s linear both;
186 | animation: asd 0.5s 0.5s linear both;
187 | z-index: 5; }
188 |
189 | .flip-clock-divider {
190 | float: left;
191 | display: inline-block;
192 | position: relative;
193 | width: 20px;
194 | color: #444;
195 | height: 100px; }
196 |
197 | .flip-clock-divider:first-child {
198 | width: 0; }
199 |
200 | .flip-clock-dot {
201 | display: block;
202 | background: #222222;
203 | width: 10px;
204 | height: 10px;
205 | position: absolute;
206 | border-radius: 50%;
207 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
208 | left: 5px; }
209 |
210 | .flip-clock-divider .flip-clock-label {
211 | position: absolute;
212 | top: -1.5em;
213 | right: -86px;
214 | color: #444;
215 | text-shadow: none; }
216 |
217 | .flip-clock-divider.minutes .flip-clock-label {
218 | right: -88px; }
219 |
220 | .flip-clock-divider.seconds .flip-clock-label {
221 | right: -91px; }
222 |
223 | .flip-clock-dot.top {
224 | top: 30px; }
225 |
226 | .flip-clock-dot.bottom {
227 | bottom: 30px; }
228 |
229 | @-webkit-keyframes asd {
230 | 0% {
231 | z-index: 2; }
232 |
233 | 20% {
234 | z-index: 4; }
235 |
236 | 100% {
237 | z-index: 4; } }
238 |
239 | @-moz-keyframes asd {
240 | 0% {
241 | z-index: 2; }
242 |
243 | 20% {
244 | z-index: 4; }
245 |
246 | 100% {
247 | z-index: 4; } }
248 |
249 | @-o-keyframes asd {
250 | 0% {
251 | z-index: 2; }
252 |
253 | 20% {
254 | z-index: 4; }
255 |
256 | 100% {
257 | z-index: 4; } }
258 |
259 | @keyframes asd {
260 | 0% {
261 | z-index: 2; }
262 |
263 | 20% {
264 | z-index: 4; }
265 |
266 | 100% {
267 | z-index: 4; } }
268 |
269 | .flip-clock-wrapper ul.play li.flip-clock-active .down {
270 | z-index: 2;
271 | -webkit-animation: turn 0.5s 0.5s linear both;
272 | -moz-animation: turn 0.5s 0.5s linear both;
273 | animation: turn 0.5s 0.5s linear both;
274 |
275 | }
276 |
277 | @-webkit-keyframes turn {
278 | 0% {
279 | -webkit-transform: rotateX(90deg);opacity: 0.5; }
280 |
281 | 100% {
282 | -webkit-transform: rotateX(0deg); } }
283 |
284 | @-moz-keyframes turn {
285 | 0% {
286 | -moz-transform: rotateX(90deg); }
287 |
288 | 100% {
289 | -moz-transform: rotateX(0deg); } }
290 |
291 | @-o-keyframes turn {
292 | 0% {
293 | -o-transform: rotateX(90deg); }
294 |
295 | 100% {
296 | -o-transform: rotateX(0deg); } }
297 |
298 | @keyframes turn {
299 | 0% {
300 | transform: rotateX(90deg);opacity: 0.5; }
301 |
302 | 100% {
303 | transform: rotateX(0deg); } }
304 |
305 | .flip-clock-wrapper ul.play li.flip-clock-before .up {
306 | z-index: 2;
307 | -webkit-animation: turn2 0.5s linear both;
308 | -moz-animation: turn2 0.5s linear both;
309 | animation: turn2 0.5s linear both; }
310 |
311 | @-webkit-keyframes turn2 {
312 | 0% {
313 | -webkit-transform: rotateX(0deg); }
314 |
315 | 100% {
316 | -webkit-transform: rotateX(-90deg); } }
317 |
318 | @-moz-keyframes turn2 {
319 | 0% {
320 | -moz-transform: rotateX(0deg); }
321 |
322 | 100% {
323 | -moz-transform: rotateX(-90deg); } }
324 |
325 | @-o-keyframes turn2 {
326 | 0% {
327 | -o-transform: rotateX(0deg); }
328 |
329 | 100% {
330 | -o-transform: rotateX(-90deg); } }
331 |
332 | @keyframes turn2 {
333 | 0% {
334 | transform: rotateX(0deg); }
335 |
336 | 100% {
337 | transform: rotateX(-90deg); } }
338 |
339 | .flip-clock-wrapper ul li.flip-clock-active {
340 | z-index: 3; }
341 |
342 | /* SHADOW */
343 | .flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
344 | background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
345 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
346 | background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
347 | background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
348 | background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
349 | background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
350 | -webkit-animation: show 0.5s linear both;
351 | -moz-animation: show 0.5s linear both;
352 | animation: show 0.5s linear both; }
353 |
354 | .flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
355 | background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
356 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
357 | background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
358 | background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
359 | background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
360 | background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
361 | -webkit-animation: hide 0.5s 0.3s linear both;
362 | -moz-animation: hide 0.5s 0.3s linear both;
363 | animation: hide 0.5s 0.3s linear both; }
364 |
365 | /*DOWN*/
366 | .flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
367 | background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
368 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
369 | background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
370 | background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
371 | background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
372 | background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
373 | -webkit-animation: show 0.5s linear both;
374 | -moz-animation: show 0.5s linear both;
375 | animation: show 0.5s linear both; }
376 |
377 | .flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
378 | background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
379 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
380 | background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
381 | background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
382 | background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
383 | background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
384 | -webkit-animation: hide 0.5s 0.3s linear both;
385 | -moz-animation: hide 0.5s 0.3s linear both;
386 | animation: hide 0.5s 0.2s linear both; }
387 |
388 | @-webkit-keyframes show {
389 | 0% {
390 | opacity: 0; }
391 |
392 | 100% {
393 | opacity: 1; } }
394 |
395 | @-moz-keyframes show {
396 | 0% {
397 | opacity: 0; }
398 |
399 | 100% {
400 | opacity: 1; } }
401 |
402 | @-o-keyframes show {
403 | 0% {
404 | opacity: 0; }
405 |
406 | 100% {
407 | opacity: 1; } }
408 |
409 | @keyframes show {
410 | 0% {
411 | opacity: 0; }
412 |
413 | 100% {
414 | opacity: 1; } }
415 |
416 | @-webkit-keyframes hide {
417 | 0% {
418 | opacity: 1; }
419 |
420 | 100% {
421 | opacity: 0; } }
422 |
423 | @-moz-keyframes hide {
424 | 0% {
425 | opacity: 1; }
426 |
427 | 100% {
428 | opacity: 0; } }
429 |
430 | @-o-keyframes hide {
431 | 0% {
432 | opacity: 1; }
433 |
434 | 100% {
435 | opacity: 0; } }
436 |
437 | @keyframes hide {
438 | 0% {
439 | opacity: 1; }
440 |
441 | 100% {
442 | opacity: 0; } }
443 |
--------------------------------------------------------------------------------
/js/flipclock.js:
--------------------------------------------------------------------------------
1 | /*
2 | Base.js, version 1.1a
3 | Copyright 2006-2010, Dean Edwards
4 | License: http://www.opensource.org/licenses/mit-license.php
5 | */
6 |
7 | var Base = function() {
8 | // dummy
9 | };
10 |
11 | Base.extend = function(_instance, _static) { // subclass
12 |
13 | "use strict";
14 |
15 | var extend = Base.prototype.extend;
16 |
17 | // build the prototype
18 | Base._prototyping = true;
19 |
20 | var proto = new this();
21 |
22 | extend.call(proto, _instance);
23 |
24 | proto.base = function() {
25 | // call this method from any other method to invoke that method's ancestor
26 | };
27 |
28 | delete Base._prototyping;
29 |
30 | // create the wrapper for the constructor function
31 | //var constructor = proto.constructor.valueOf(); //-dean
32 | var constructor = proto.constructor;
33 | var klass = proto.constructor = function() {
34 | if (!Base._prototyping) {
35 | if (this._constructing || this.constructor == klass) { // instantiation
36 | this._constructing = true;
37 | constructor.apply(this, arguments);
38 | delete this._constructing;
39 | } else if (arguments[0] !== null) { // casting
40 | return (arguments[0].extend || extend).call(arguments[0], proto);
41 | }
42 | }
43 | };
44 |
45 | // build the class interface
46 | klass.ancestor = this;
47 | klass.extend = this.extend;
48 | klass.forEach = this.forEach;
49 | klass.implement = this.implement;
50 | klass.prototype = proto;
51 | klass.toString = this.toString;
52 | klass.valueOf = function(type) {
53 | //return (type == "object") ? klass : constructor; //-dean
54 | return (type == "object") ? klass : constructor.valueOf();
55 | };
56 | extend.call(klass, _static);
57 | // class initialisation
58 | if (typeof klass.init == "function") klass.init();
59 | return klass;
60 | };
61 |
62 | Base.prototype = {
63 | extend: function(source, value) {
64 | if (arguments.length > 1) { // extending with a name/value pair
65 | var ancestor = this[source];
66 | if (ancestor && (typeof value == "function") && // overriding a method?
67 | // the valueOf() comparison is to avoid circular references
68 | (!ancestor.valueOf || ancestor.valueOf() != value.valueOf()) &&
69 | /\bbase\b/.test(value)) {
70 | // get the underlying method
71 | var method = value.valueOf();
72 | // override
73 | value = function() {
74 | var previous = this.base || Base.prototype.base;
75 | this.base = ancestor;
76 | var returnValue = method.apply(this, arguments);
77 | this.base = previous;
78 | return returnValue;
79 | };
80 | // point to the underlying method
81 | value.valueOf = function(type) {
82 | return (type == "object") ? value : method;
83 | };
84 | value.toString = Base.toString;
85 | }
86 | this[source] = value;
87 | } else if (source) { // extending with an object literal
88 | var extend = Base.prototype.extend;
89 | // if this object has a customised extend method then use it
90 | if (!Base._prototyping && typeof this != "function") {
91 | extend = this.extend || extend;
92 | }
93 | var proto = {toSource: null};
94 | // do the "toString" and other methods manually
95 | var hidden = ["constructor", "toString", "valueOf"];
96 | // if we are prototyping then include the constructor
97 | var i = Base._prototyping ? 0 : 1;
98 | while (key = hidden[i++]) {
99 | if (source[key] != proto[key]) {
100 | extend.call(this, key, source[key]);
101 |
102 | }
103 | }
104 | // copy each of the source object's properties to this object
105 | for (var key in source) {
106 | if (!proto[key]) extend.call(this, key, source[key]);
107 | }
108 | }
109 | return this;
110 | }
111 | };
112 |
113 | // initialise
114 | Base = Base.extend({
115 | constructor: function() {
116 | this.extend(arguments[0]);
117 | }
118 | }, {
119 | ancestor: Object,
120 | version: "1.1",
121 |
122 | forEach: function(object, block, context) {
123 | for (var key in object) {
124 | if (this.prototype[key] === undefined) {
125 | block.call(context, object[key], key, object);
126 | }
127 | }
128 | },
129 |
130 | implement: function() {
131 | for (var i = 0; i < arguments.length; i++) {
132 | if (typeof arguments[i] == "function") {
133 | // if it's a function, call it
134 | arguments[i](this.prototype);
135 | } else {
136 | // add the interface using the extend method
137 | this.prototype.extend(arguments[i]);
138 | }
139 | }
140 | return this;
141 | },
142 |
143 | toString: function() {
144 | return String(this.valueOf());
145 | }
146 | });
147 | /*jshint smarttabs:true */
148 |
149 | var FlipClock;
150 |
151 | /**
152 | * FlipClock.js
153 | *
154 | * @author Justin Kimbrell
155 | * @copyright 2013 - Objective HTML, LLC
156 | * @licesnse http://www.opensource.org/licenses/mit-license.php
157 | */
158 |
159 | (function($) {
160 |
161 | "use strict";
162 |
163 | /**
164 | * FlipFlock Helper
165 | *
166 | * @param object A jQuery object or CSS select
167 | * @param int An integer used to start the clock (no. seconds)
168 | * @param object An object of properties to override the default
169 | */
170 |
171 | FlipClock = function(obj, digit, options) {
172 | if(digit instanceof Object && digit instanceof Date === false) {
173 | options = digit;
174 | digit = 0;
175 | }
176 |
177 | return new FlipClock.Factory(obj, digit, options);
178 | };
179 |
180 | /**
181 | * The global FlipClock.Lang object
182 | */
183 |
184 | FlipClock.Lang = {};
185 |
186 | /**
187 | * The Base FlipClock class is used to extend all other FlipFlock
188 | * classes. It handles the callbacks and the basic setters/getters
189 | *
190 | * @param object An object of the default properties
191 | * @param object An object of properties to override the default
192 | */
193 |
194 | FlipClock.Base = Base.extend({
195 |
196 | /**
197 | * Build Date
198 | */
199 |
200 | buildDate: '2014-12-12',
201 |
202 | /**
203 | * Version
204 | */
205 |
206 | version: '0.7.7',
207 |
208 | /**
209 | * Sets the default options
210 | *
211 | * @param object The default options
212 | * @param object The override options
213 | */
214 |
215 | constructor: function(_default, options) {
216 | if(typeof _default !== "object") {
217 | _default = {};
218 | }
219 | if(typeof options !== "object") {
220 | options = {};
221 | }
222 | this.setOptions($.extend(true, {}, _default, options));
223 | },
224 |
225 | /**
226 | * Delegates the callback to the defined method
227 | *
228 | * @param object The default options
229 | * @param object The override options
230 | */
231 |
232 | callback: function(method) {
233 | if(typeof method === "function") {
234 | var args = [];
235 |
236 | for(var x = 1; x <= arguments.length; x++) {
237 | if(arguments[x]) {
238 | args.push(arguments[x]);
239 | }
240 | }
241 |
242 | method.apply(this, args);
243 | }
244 | },
245 |
246 | /**
247 | * Log a string into the console if it exists
248 | *
249 | * @param string The name of the option
250 | * @return mixed
251 | */
252 |
253 | log: function(str) {
254 | if(window.console && console.log) {
255 | console.log(str);
256 | }
257 | },
258 |
259 | /**
260 | * Get an single option value. Returns false if option does not exist
261 | *
262 | * @param string The name of the option
263 | * @return mixed
264 | */
265 |
266 | getOption: function(index) {
267 | if(this[index]) {
268 | return this[index];
269 | }
270 | return false;
271 | },
272 |
273 | /**
274 | * Get all options
275 | *
276 | * @return bool
277 | */
278 |
279 | getOptions: function() {
280 | return this;
281 | },
282 |
283 | /**
284 | * Set a single option value
285 | *
286 | * @param string The name of the option
287 | * @param mixed The value of the option
288 | */
289 |
290 | setOption: function(index, value) {
291 | this[index] = value;
292 | },
293 |
294 | /**
295 | * Set a multiple options by passing a JSON object
296 | *
297 | * @param object The object with the options
298 | * @param mixed The value of the option
299 | */
300 |
301 | setOptions: function(options) {
302 | for(var key in options) {
303 | if(typeof options[key] !== "undefined") {
304 | this.setOption(key, options[key]);
305 | }
306 | }
307 | }
308 |
309 | });
310 |
311 | }(jQuery));
312 |
313 | /*jshint smarttabs:true */
314 |
315 | /**
316 | * FlipClock.js
317 | *
318 | * @author Justin Kimbrell
319 | * @copyright 2013 - Objective HTML, LLC
320 | * @licesnse http://www.opensource.org/licenses/mit-license.php
321 | */
322 |
323 | (function($) {
324 |
325 | "use strict";
326 |
327 | /**
328 | * The FlipClock Face class is the base class in which to extend
329 | * all other FlockClock.Face classes.
330 | *
331 | * @param object The parent FlipClock.Factory object
332 | * @param object An object of properties to override the default
333 | */
334 |
335 | FlipClock.Face = FlipClock.Base.extend({
336 |
337 | /**
338 | * Sets whether or not the clock should start upon instantiation
339 | */
340 |
341 | autoStart: true,
342 |
343 | /**
344 | * An array of jQuery objects used for the dividers (the colons)
345 | */
346 |
347 | dividers: [],
348 |
349 | /**
350 | * An array of FlipClock.List objects
351 | */
352 |
353 | factory: false,
354 |
355 | /**
356 | * An array of FlipClock.List objects
357 | */
358 |
359 | lists: [],
360 |
361 | /**
362 | * Constructor
363 | *
364 | * @param object The parent FlipClock.Factory object
365 | * @param object An object of properties to override the default
366 | */
367 |
368 | constructor: function(factory, options) {
369 | this.dividers = [];
370 | this.lists = [];
371 | this.base(options);
372 | this.factory = factory;
373 | },
374 |
375 | /**
376 | * Build the clock face
377 | */
378 |
379 | build: function() {
380 | if(this.autoStart) {
381 | this.start();
382 | }
383 | },
384 |
385 | /**
386 | * Creates a jQuery object used for the digit divider
387 | *
388 | * @param mixed The divider label text
389 | * @param mixed Set true to exclude the dots in the divider.
390 | * If not set, is false.
391 | */
392 |
393 | createDivider: function(label, css, excludeDots) {
394 | if(typeof css == "boolean" || !css) {
395 | excludeDots = css;
396 | css = label;
397 | }
398 |
399 | var dots = [
400 | '',
401 | ''
402 | ].join('');
403 |
404 | if(excludeDots) {
405 | dots = '';
406 | }
407 |
408 | label = this.factory.localize(label);
409 |
410 | var html = [
411 | '',
412 | ''+(label ? label : '')+'',
413 | dots,
414 | ''
415 | ];
416 |
417 | var $html = $(html.join(''));
418 |
419 | this.dividers.push($html);
420 |
421 | return $html;
422 | },
423 |
424 | /**
425 | * Creates a FlipClock.List object and appends it to the DOM
426 | *
427 | * @param mixed The digit to select in the list
428 | * @param object An object to override the default properties
429 | */
430 |
431 | createList: function(digit, options) {
432 | if(typeof digit === "object") {
433 | options = digit;
434 | digit = 0;
435 | }
436 |
437 | var obj = new FlipClock.List(this.factory, digit, options);
438 |
439 | this.lists.push(obj);
440 |
441 | return obj;
442 | },
443 |
444 | /**
445 | * Triggers when the clock is reset
446 | */
447 |
448 | reset: function() {
449 | this.factory.time = new FlipClock.Time(
450 | this.factory,
451 | this.factory.original ? Math.round(this.factory.original) : 0,
452 | {
453 | minimumDigits: this.factory.minimumDigits
454 | }
455 | );
456 |
457 | this.flip(this.factory.original, false);
458 | },
459 |
460 | /**
461 | * Append a newly created list to the clock
462 | */
463 |
464 | appendDigitToClock: function(obj) {
465 | obj.$el.append(false);
466 | },
467 |
468 | /**
469 | * Add a digit to the clock face
470 | */
471 |
472 | addDigit: function(digit) {
473 | var obj = this.createList(digit, {
474 | classes: {
475 | active: this.factory.classes.active,
476 | before: this.factory.classes.before,
477 | flip: this.factory.classes.flip
478 | }
479 | });
480 |
481 | this.appendDigitToClock(obj);
482 | },
483 |
484 | /**
485 | * Triggers when the clock is started
486 | */
487 |
488 | start: function() {},
489 |
490 | /**
491 | * Triggers when the time on the clock stops
492 | */
493 |
494 | stop: function() {},
495 |
496 | /**
497 | * Auto increments/decrements the value of the clock face
498 | */
499 |
500 | autoIncrement: function() {
501 | if(!this.factory.countdown) {
502 | this.increment();
503 | }
504 | else {
505 | this.decrement();
506 | }
507 | },
508 |
509 | /**
510 | * Increments the value of the clock face
511 | */
512 |
513 | increment: function() {
514 | this.factory.time.addSecond();
515 | },
516 |
517 | /**
518 | * Decrements the value of the clock face
519 | */
520 |
521 | decrement: function() {
522 | if(this.factory.time.getTimeSeconds() == 0) {
523 | this.factory.stop()
524 | }
525 | else {
526 | this.factory.time.subSecond();
527 | }
528 | },
529 |
530 | /**
531 | * Triggers when the numbers on the clock flip
532 | */
533 |
534 | flip: function(time, doNotAddPlayClass) {
535 | var t = this;
536 |
537 | $.each(time, function(i, digit) {
538 | var list = t.lists[i];
539 |
540 | if(list) {
541 | if(!doNotAddPlayClass && digit != list.digit) {
542 | list.play();
543 | }
544 |
545 | list.select(digit);
546 | }
547 | else {
548 | t.addDigit(digit);
549 | }
550 | });
551 | }
552 |
553 | });
554 |
555 | }(jQuery));
556 |
557 | /*jshint smarttabs:true */
558 |
559 | /**
560 | * FlipClock.js
561 | *
562 | * @author Justin Kimbrell
563 | * @copyright 2013 - Objective HTML, LLC
564 | * @licesnse http://www.opensource.org/licenses/mit-license.php
565 | */
566 |
567 | (function($) {
568 |
569 | "use strict";
570 |
571 | /**
572 | * The FlipClock Factory class is used to build the clock and manage
573 | * all the public methods.
574 | *
575 | * @param object A jQuery object or CSS selector used to fetch
576 | the wrapping DOM nodes
577 | * @param mixed This is the digit used to set the clock. If an
578 | object is passed, 0 will be used.
579 | * @param object An object of properties to override the default
580 | */
581 |
582 | FlipClock.Factory = FlipClock.Base.extend({
583 |
584 | /**
585 | * The clock's animation rate.
586 | *
587 | * Note, currently this property doesn't do anything.
588 | * This property is here to be used in the future to
589 | * programmaticaly set the clock's animation speed
590 | */
591 |
592 | animationRate: 1000,
593 |
594 | /**
595 | * Auto start the clock on page load (True|False)
596 | */
597 |
598 | autoStart: true,
599 |
600 | /**
601 | * The callback methods
602 | */
603 |
604 | callbacks: {
605 | destroy: false,
606 | create: false,
607 | init: false,
608 | interval: false,
609 | start: false,
610 | stop: false,
611 | reset: false
612 | },
613 |
614 | /**
615 | * The CSS classes
616 | */
617 |
618 | classes: {
619 | active: 'flip-clock-active',
620 | before: 'flip-clock-before',
621 | divider: 'flip-clock-divider',
622 | dot: 'flip-clock-dot',
623 | label: 'flip-clock-label',
624 | flip: 'flip',
625 | play: 'play',
626 | wrapper: 'flip-clock-wrapper'
627 | },
628 |
629 | /**
630 | * The name of the clock face class in use
631 | */
632 |
633 | clockFace: 'HourlyCounter',
634 |
635 | /**
636 | * The name of the clock face class in use
637 | */
638 |
639 | countdown: false,
640 |
641 | /**
642 | * The name of the default clock face class to use if the defined
643 | * clockFace variable is not a valid FlipClock.Face object
644 | */
645 |
646 | defaultClockFace: 'HourlyCounter',
647 |
648 | /**
649 | * The default language
650 | */
651 |
652 | defaultLanguage: 'english',
653 |
654 | /**
655 | * The jQuery object
656 | */
657 |
658 | $el: false,
659 |
660 | /**
661 | * The FlipClock.Face object
662 | */
663 |
664 | face: true,
665 |
666 | /**
667 | * The language object after it has been loaded
668 | */
669 |
670 | lang: false,
671 |
672 | /**
673 | * The language being used to display labels (string)
674 | */
675 |
676 | language: 'english',
677 |
678 | /**
679 | * The minimum digits the clock must have
680 | */
681 |
682 | minimumDigits: 0,
683 |
684 | /**
685 | * The original starting value of the clock. Used for the reset method.
686 | */
687 |
688 | original: false,
689 |
690 | /**
691 | * Is the clock running? (True|False)
692 | */
693 |
694 | running: false,
695 |
696 | /**
697 | * The FlipClock.Time object
698 | */
699 |
700 | time: false,
701 |
702 | /**
703 | * The FlipClock.Timer object
704 | */
705 |
706 | timer: false,
707 |
708 | /**
709 | * The jQuery object (depcrecated)
710 | */
711 |
712 | $wrapper: false,
713 |
714 | /**
715 | * Constructor
716 | *
717 | * @param object The wrapping jQuery object
718 | * @param object Number of seconds used to start the clock
719 | * @param object An object override options
720 | */
721 |
722 | constructor: function(obj, digit, options) {
723 |
724 | if(!options) {
725 | options = {};
726 | }
727 |
728 | this.lists = [];
729 | this.running = false;
730 | this.base(options);
731 |
732 | this.$el = $(obj).addClass(this.classes.wrapper);
733 |
734 | // Depcrated support of the $wrapper property.
735 | this.$wrapper = this.$el;
736 |
737 | this.original = (digit instanceof Date) ? digit : (digit ? Math.round(digit) : 0);
738 |
739 | this.time = new FlipClock.Time(this, this.original, {
740 | minimumDigits: this.minimumDigits,
741 | animationRate: this.animationRate
742 | });
743 |
744 | this.timer = new FlipClock.Timer(this, options);
745 |
746 | this.loadLanguage(this.language);
747 |
748 | this.loadClockFace(this.clockFace, options);
749 |
750 | if(this.autoStart) {
751 | this.start();
752 | }
753 |
754 | },
755 |
756 | /**
757 | * Load the FlipClock.Face object
758 | *
759 | * @param object The name of the FlickClock.Face class
760 | * @param object An object override options
761 | */
762 |
763 | loadClockFace: function(name, options) {
764 | var face, suffix = 'Face', hasStopped = false;
765 |
766 | name = name.ucfirst()+suffix;
767 |
768 | if(this.face.stop) {
769 | this.stop();
770 | hasStopped = true;
771 | }
772 |
773 | this.$el.html('');
774 |
775 | this.time.minimumDigits = this.minimumDigits;
776 |
777 | if(FlipClock[name]) {
778 | face = new FlipClock[name](this, options);
779 | }
780 | else {
781 | face = new FlipClock[this.defaultClockFace+suffix](this, options);
782 | }
783 |
784 | face.build();
785 |
786 | this.face = face
787 |
788 | if(hasStopped) {
789 | this.start();
790 | }
791 |
792 | return this.face;
793 | },
794 |
795 | /**
796 | * Load the FlipClock.Lang object
797 | *
798 | * @param object The name of the language to load
799 | */
800 |
801 | loadLanguage: function(name) {
802 | var lang;
803 |
804 | if(FlipClock.Lang[name.ucfirst()]) {
805 | lang = FlipClock.Lang[name.ucfirst()];
806 | }
807 | else if(FlipClock.Lang[name]) {
808 | lang = FlipClock.Lang[name];
809 | }
810 | else {
811 | lang = FlipClock.Lang[this.defaultLanguage];
812 | }
813 |
814 | return this.lang = lang;
815 | },
816 |
817 | /**
818 | * Localize strings into various languages
819 | *
820 | * @param string The index of the localized string
821 | * @param object Optionally pass a lang object
822 | */
823 |
824 | localize: function(index, obj) {
825 | var lang = this.lang;
826 |
827 | if(!index) {
828 | return null;
829 | }
830 |
831 | var lindex = index.toLowerCase();
832 |
833 | if(typeof obj == "object") {
834 | lang = obj;
835 | }
836 |
837 | if(lang && lang[lindex]) {
838 | return lang[lindex];
839 | }
840 |
841 | return index;
842 | },
843 |
844 |
845 | /**
846 | * Starts the clock
847 | */
848 |
849 | start: function(callback) {
850 | var t = this;
851 |
852 | if(!t.running && (!t.countdown || t.countdown && t.time.time > 0)) {
853 | t.face.start(t.time);
854 | t.timer.start(function() {
855 | t.flip();
856 |
857 | if(typeof callback === "function") {
858 | callback();
859 | }
860 | });
861 | }
862 | else {
863 | t.log('Trying to start timer when countdown already at 0');
864 | }
865 | },
866 |
867 | /**
868 | * Stops the clock
869 | */
870 |
871 | stop: function(callback) {
872 | this.face.stop();
873 | this.timer.stop(callback);
874 |
875 | for(var x in this.lists) {
876 | if (this.lists.hasOwnProperty(x)) {
877 | this.lists[x].stop();
878 | }
879 | }
880 | },
881 |
882 | /**
883 | * Reset the clock
884 | */
885 |
886 | reset: function(callback) {
887 | this.timer.reset(callback);
888 | this.face.reset();
889 | },
890 |
891 | /**
892 | * Sets the clock time
893 | */
894 |
895 | setTime: function(time) {
896 | this.time.time = time;
897 | this.flip(true);
898 | },
899 |
900 | /**
901 | * Get the clock time
902 | *
903 | * @return object Returns a FlipClock.Time object
904 | */
905 |
906 | getTime: function(time) {
907 | return this.time;
908 | },
909 |
910 | /**
911 | * Changes the increment of time to up or down (add/sub)
912 | */
913 |
914 | setCountdown: function(value) {
915 | var running = this.running;
916 |
917 | this.countdown = value ? true : false;
918 |
919 | if(running) {
920 | this.stop();
921 | this.start();
922 | }
923 | },
924 |
925 | /**
926 | * Flip the digits on the clock
927 | *
928 | * @param array An array of digits
929 | */
930 | flip: function(doNotAddPlayClass) {
931 | this.face.flip(false, doNotAddPlayClass);
932 | }
933 |
934 | });
935 |
936 | }(jQuery));
937 |
938 | /*jshint smarttabs:true */
939 |
940 | /**
941 | * FlipClock.js
942 | *
943 | * @author Justin Kimbrell
944 | * @copyright 2013 - Objective HTML, LLC
945 | * @licesnse http://www.opensource.org/licenses/mit-license.php
946 | */
947 |
948 | (function($) {
949 |
950 | "use strict";
951 |
952 | /**
953 | * The FlipClock List class is used to build the list used to create
954 | * the card flip effect. This object fascilates selecting the correct
955 | * node by passing a specific digit.
956 | *
957 | * @param object A FlipClock.Factory object
958 | * @param mixed This is the digit used to set the clock. If an
959 | * object is passed, 0 will be used.
960 | * @param object An object of properties to override the default
961 | */
962 |
963 | FlipClock.List = FlipClock.Base.extend({
964 |
965 | /**
966 | * The digit (0-9)
967 | */
968 |
969 | digit: 0,
970 |
971 | /**
972 | * The CSS classes
973 | */
974 |
975 | classes: {
976 | active: 'flip-clock-active',
977 | before: 'flip-clock-before',
978 | flip: 'flip'
979 | },
980 |
981 | /**
982 | * The parent FlipClock.Factory object
983 | */
984 |
985 | factory: false,
986 |
987 | /**
988 | * The jQuery object
989 | */
990 |
991 | $el: false,
992 |
993 | /**
994 | * The jQuery object (deprecated)
995 | */
996 |
997 | $obj: false,
998 |
999 | /**
1000 | * The items in the list
1001 | */
1002 |
1003 | items: [],
1004 |
1005 | /**
1006 | * The last digit
1007 | */
1008 |
1009 | lastDigit: 0,
1010 |
1011 | /**
1012 | * Constructor
1013 | *
1014 | * @param object A FlipClock.Factory object
1015 | * @param int An integer use to select the correct digit
1016 | * @param object An object to override the default properties
1017 | */
1018 |
1019 | constructor: function(factory, digit, options) {
1020 | this.factory = factory;
1021 | this.digit = digit;
1022 | this.lastDigit = digit;
1023 | this.$el = this.createList();
1024 |
1025 | // Depcrated support of the $obj property.
1026 | this.$obj = this.$el;
1027 |
1028 | if(digit > 0) {
1029 | this.select(digit);
1030 | }
1031 |
1032 | this.factory.$el.append(this.$el);
1033 | },
1034 |
1035 | /**
1036 | * Select the digit in the list
1037 | *
1038 | * @param int A digit 0-9
1039 | */
1040 |
1041 | select: function(digit) {
1042 | if(typeof digit === "undefined") {
1043 | digit = this.digit;
1044 | }
1045 | else {
1046 | this.digit = digit;
1047 | }
1048 |
1049 | if(this.digit != this.lastDigit) {
1050 | var $delete = this.$el.find('.'+this.classes.before).removeClass(this.classes.before);
1051 |
1052 | this.$el.find('.'+this.classes.active).removeClass(this.classes.active)
1053 | .addClass(this.classes.before);
1054 |
1055 | this.appendListItem(this.classes.active, this.digit);
1056 |
1057 | $delete.remove();
1058 |
1059 | this.lastDigit = this.digit;
1060 | }
1061 | },
1062 |
1063 | /**
1064 | * Adds the play class to the DOM object
1065 | */
1066 |
1067 | play: function() {
1068 | this.$el.addClass(this.factory.classes.play);
1069 | },
1070 |
1071 | /**
1072 | * Removes the play class to the DOM object
1073 | */
1074 |
1075 | stop: function() {
1076 | var t = this;
1077 |
1078 | setTimeout(function() {
1079 | t.$el.removeClass(t.factory.classes.play);
1080 | }, this.factory.timer.interval);
1081 | },
1082 |
1083 | /**
1084 | * Creates the list item HTML and returns as a string
1085 | */
1086 |
1087 | createListItem: function(css, value) {
1088 | return [
1089 | '',
1090 | '',
1091 | '',
1092 | '
',
1093 | '
'+(value ? value : '')+'
',
1094 | '
',
1096 | '
',
1097 | '
'+(value ? value : '')+'
',
1098 | '
',
1124 | this.createListItem(this.classes.before, lastDigit),
1125 | this.createListItem(this.classes.active, this.digit),
1126 | '
'
1127 | ].join(''));
1128 |
1129 | return html;
1130 | },
1131 |
1132 | getNextDigit: function() {
1133 | return this.digit == 9 ? 0 : this.digit + 1;
1134 | },
1135 |
1136 | getPrevDigit: function() {
1137 | return this.digit == 0 ? 9 : this.digit - 1;
1138 | }
1139 |
1140 | });
1141 |
1142 |
1143 | }(jQuery));
1144 |
1145 | /*jshint smarttabs:true */
1146 |
1147 | /**
1148 | * FlipClock.js
1149 | *
1150 | * @author Justin Kimbrell
1151 | * @copyright 2013 - Objective HTML, LLC
1152 | * @licesnse http://www.opensource.org/licenses/mit-license.php
1153 | */
1154 |
1155 | (function($) {
1156 |
1157 | "use strict";
1158 |
1159 | /**
1160 | * Capitalize the first letter in a string
1161 | *
1162 | * @return string
1163 | */
1164 |
1165 | String.prototype.ucfirst = function() {
1166 | return this.substr(0, 1).toUpperCase() + this.substr(1);
1167 | };
1168 |
1169 | /**
1170 | * jQuery helper method
1171 | *
1172 | * @param int An integer used to start the clock (no. seconds)
1173 | * @param object An object of properties to override the default
1174 | */
1175 |
1176 | $.fn.FlipClock = function(digit, options) {
1177 | return new FlipClock($(this), digit, options);
1178 | };
1179 |
1180 | /**
1181 | * jQuery helper method
1182 | *
1183 | * @param int An integer used to start the clock (no. seconds)
1184 | * @param object An object of properties to override the default
1185 | */
1186 |
1187 | $.fn.flipClock = function(digit, options) {
1188 | return $.fn.FlipClock(digit, options);
1189 | };
1190 |
1191 | }(jQuery));
1192 |
1193 | /*jshint smarttabs:true */
1194 |
1195 | /**
1196 | * FlipClock.js
1197 | *
1198 | * @author Justin Kimbrell
1199 | * @copyright 2013 - Objective HTML, LLC
1200 | * @licesnse http://www.opensource.org/licenses/mit-license.php
1201 | */
1202 |
1203 | (function($) {
1204 |
1205 | "use strict";
1206 |
1207 | /**
1208 | * The FlipClock Time class is used to manage all the time
1209 | * calculations.
1210 | *
1211 | * @param object A FlipClock.Factory object
1212 | * @param mixed This is the digit used to set the clock. If an
1213 | * object is passed, 0 will be used.
1214 | * @param object An object of properties to override the default
1215 | */
1216 |
1217 | FlipClock.Time = FlipClock.Base.extend({
1218 |
1219 | /**
1220 | * The time (in seconds) or a date object
1221 | */
1222 |
1223 | time: 0,
1224 |
1225 | /**
1226 | * The parent FlipClock.Factory object
1227 | */
1228 |
1229 | factory: false,
1230 |
1231 | /**
1232 | * The minimum number of digits the clock face must have
1233 | */
1234 |
1235 | minimumDigits: 0,
1236 |
1237 | /**
1238 | * Constructor
1239 | *
1240 | * @param object A FlipClock.Factory object
1241 | * @param int An integer use to select the correct digit
1242 | * @param object An object to override the default properties
1243 | */
1244 |
1245 | constructor: function(factory, time, options) {
1246 | if(typeof options != "object") {
1247 | options = {};
1248 | }
1249 |
1250 | if(!options.minimumDigits) {
1251 | options.minimumDigits = factory.minimumDigits;
1252 | }
1253 |
1254 | this.base(options);
1255 | this.factory = factory;
1256 |
1257 | if(time) {
1258 | this.time = time;
1259 | }
1260 | },
1261 |
1262 | /**
1263 | * Convert a string or integer to an array of digits
1264 | *
1265 | * @param mixed String or Integer of digits
1266 | * @return array An array of digits
1267 | */
1268 |
1269 | convertDigitsToArray: function(str) {
1270 | var data = [];
1271 |
1272 | str = str.toString();
1273 |
1274 | for(var x = 0;x < str.length; x++) {
1275 | if(str[x].match(/^\d*$/g)) {
1276 | data.push(str[x]);
1277 | }
1278 | }
1279 |
1280 | return data;
1281 | },
1282 |
1283 | /**
1284 | * Get a specific digit from the time integer
1285 | *
1286 | * @param int The specific digit to select from the time
1287 | * @return mixed Returns FALSE if no digit is found, otherwise
1288 | * the method returns the defined digit
1289 | */
1290 |
1291 | digit: function(i) {
1292 | var timeStr = this.toString();
1293 | var length = timeStr.length;
1294 |
1295 | if(timeStr[length - i]) {
1296 | return timeStr[length - i];
1297 | }
1298 |
1299 | return false;
1300 | },
1301 |
1302 | /**
1303 | * Formats any array of digits into a valid array of digits
1304 | *
1305 | * @param mixed An array of digits
1306 | * @return array An array of digits
1307 | */
1308 |
1309 | digitize: function(obj) {
1310 | var data = [];
1311 |
1312 | $.each(obj, function(i, value) {
1313 | value = value.toString();
1314 |
1315 | if(value.length == 1) {
1316 | value = '0'+value;
1317 | }
1318 |
1319 | for(var x = 0; x < value.length; x++) {
1320 | data.push(value.charAt(x));
1321 | }
1322 | });
1323 |
1324 | if(data.length > this.minimumDigits) {
1325 | this.minimumDigits = data.length;
1326 | }
1327 |
1328 | if(this.minimumDigits > data.length) {
1329 | for(var x = data.length; x < this.minimumDigits; x++) {
1330 | data.unshift('0');
1331 | }
1332 | }
1333 |
1334 | return data;
1335 | },
1336 |
1337 | /**
1338 | * Gets a new Date object for the current time
1339 | *
1340 | * @return array Returns a Date object
1341 | */
1342 |
1343 | getDateObject: function() {
1344 | if(this.time instanceof Date) {
1345 | return this.time;
1346 | }
1347 |
1348 | return new Date((new Date()).getTime() + this.getTimeSeconds() * 1000);
1349 | },
1350 |
1351 | /**
1352 | * Gets a digitized daily counter
1353 | *
1354 | * @return object Returns a digitized object
1355 | */
1356 |
1357 | getDayCounter: function(includeSeconds) {
1358 | var digits = [
1359 | this.getDays(),
1360 | this.getHours(true),
1361 | this.getMinutes(true)
1362 | ];
1363 |
1364 | if(includeSeconds) {
1365 | digits.push(this.getSeconds(true));
1366 | }
1367 |
1368 | return this.digitize(digits);
1369 | },
1370 |
1371 | /**
1372 | * Gets number of days
1373 | *
1374 | * @param bool Should perform a modulus? If not sent, then no.
1375 | * @return int Retuns a floored integer
1376 | */
1377 |
1378 | getDays: function(mod) {
1379 | var days = this.getTimeSeconds() / 60 / 60 / 24;
1380 |
1381 | if(mod) {
1382 | days = days % 7;
1383 | }
1384 |
1385 | return Math.floor(days);
1386 | },
1387 |
1388 | /**
1389 | * Gets an hourly breakdown
1390 | *
1391 | * @return object Returns a digitized object
1392 | */
1393 |
1394 | getHourCounter: function() {
1395 | var obj = this.digitize([
1396 | this.getHours(),
1397 | this.getMinutes(true),
1398 | this.getSeconds(true)
1399 | ]);
1400 |
1401 | return obj;
1402 | },
1403 |
1404 | /**
1405 | * Gets an hourly breakdown
1406 | *
1407 | * @return object Returns a digitized object
1408 | */
1409 |
1410 | getHourly: function() {
1411 | return this.getHourCounter();
1412 | },
1413 |
1414 | /**
1415 | * Gets number of hours
1416 | *
1417 | * @param bool Should perform a modulus? If not sent, then no.
1418 | * @return int Retuns a floored integer
1419 | */
1420 |
1421 | getHours: function(mod) {
1422 | var hours = this.getTimeSeconds() / 60 / 60;
1423 |
1424 | if(mod) {
1425 | hours = hours % 24;
1426 | }
1427 |
1428 | return Math.floor(hours);
1429 | },
1430 |
1431 | /**
1432 | * Gets the twenty-four hour time
1433 | *
1434 | * @return object returns a digitized object
1435 | */
1436 |
1437 | getMilitaryTime: function(date, showSeconds) {
1438 | if(typeof showSeconds === "undefined") {
1439 | showSeconds = true;
1440 | }
1441 |
1442 | if(!date) {
1443 | date = this.getDateObject();
1444 | }
1445 |
1446 | var data = [
1447 | date.getHours(),
1448 | date.getMinutes()
1449 | ];
1450 |
1451 | if(showSeconds === true) {
1452 | data.push(date.getSeconds());
1453 | }
1454 |
1455 | return this.digitize(data);
1456 | },
1457 |
1458 | /**
1459 | * Gets number of minutes
1460 | *
1461 | * @param bool Should perform a modulus? If not sent, then no.
1462 | * @return int Retuns a floored integer
1463 | */
1464 |
1465 | getMinutes: function(mod) {
1466 | var minutes = this.getTimeSeconds() / 60;
1467 |
1468 | if(mod) {
1469 | minutes = minutes % 60;
1470 | }
1471 |
1472 | return Math.floor(minutes);
1473 | },
1474 |
1475 | /**
1476 | * Gets a minute breakdown
1477 | */
1478 |
1479 | getMinuteCounter: function() {
1480 | var obj = this.digitize([
1481 | this.getMinutes(),
1482 | this.getSeconds(true)
1483 | ]);
1484 |
1485 | return obj;
1486 | },
1487 |
1488 | /**
1489 | * Gets time count in seconds regardless of if targetting date or not.
1490 | *
1491 | * @return int Returns a floored integer
1492 | */
1493 |
1494 | getTimeSeconds: function(date) {
1495 | if(!date) {
1496 | date = new Date();
1497 | }
1498 |
1499 | if (this.time instanceof Date) {
1500 | if (this.factory.countdown) {
1501 | return Math.max(this.time.getTime()/1000 - date.getTime()/1000,0);
1502 | } else {
1503 | return date.getTime()/1000 - this.time.getTime()/1000 ;
1504 | }
1505 | } else {
1506 | return this.time;
1507 | }
1508 | },
1509 |
1510 | /**
1511 | * Gets the current twelve hour time
1512 | *
1513 | * @return object Returns a digitized object
1514 | */
1515 |
1516 | getTime: function(date, showSeconds) {
1517 | if(typeof showSeconds === "undefined") {
1518 | showSeconds = true;
1519 | }
1520 |
1521 | if(!date) {
1522 | date = this.getDateObject();
1523 | }
1524 |
1525 | console.log(date);
1526 |
1527 |
1528 | var hours = date.getHours();
1529 | var merid = hours > 12 ? 'PM' : 'AM';
1530 | var data = [
1531 | hours > 12 ? hours - 12 : (hours === 0 ? 12 : hours),
1532 | date.getMinutes()
1533 | ];
1534 |
1535 | if(showSeconds === true) {
1536 | data.push(date.getSeconds());
1537 | }
1538 |
1539 | return this.digitize(data);
1540 | },
1541 |
1542 | /**
1543 | * Gets number of seconds
1544 | *
1545 | * @param bool Should perform a modulus? If not sent, then no.
1546 | * @return int Retuns a ceiled integer
1547 | */
1548 |
1549 | getSeconds: function(mod) {
1550 | var seconds = this.getTimeSeconds();
1551 |
1552 | if(mod) {
1553 | if(seconds == 60) {
1554 | seconds = 0;
1555 | }
1556 | else {
1557 | seconds = seconds % 60;
1558 | }
1559 | }
1560 |
1561 | return Math.ceil(seconds);
1562 | },
1563 |
1564 | /**
1565 | * Gets number of weeks
1566 | *
1567 | * @param bool Should perform a modulus? If not sent, then no.
1568 | * @return int Retuns a floored integer
1569 | */
1570 |
1571 | getWeeks: function(mod) {
1572 | var weeks = this.getTimeSeconds() / 60 / 60 / 24 / 7;
1573 |
1574 | if(mod) {
1575 | weeks = weeks % 52;
1576 | }
1577 |
1578 | return Math.floor(weeks);
1579 | },
1580 |
1581 | /**
1582 | * Removes a specific number of leading zeros from the array.
1583 | * This method prevents you from removing too many digits, even
1584 | * if you try.
1585 | *
1586 | * @param int Total number of digits to remove
1587 | * @return array An array of digits
1588 | */
1589 |
1590 | removeLeadingZeros: function(totalDigits, digits) {
1591 | var total = 0;
1592 | var newArray = [];
1593 |
1594 | $.each(digits, function(i, digit) {
1595 | if(i < totalDigits) {
1596 | total += parseInt(digits[i], 10);
1597 | }
1598 | else {
1599 | newArray.push(digits[i]);
1600 | }
1601 | });
1602 |
1603 | if(total === 0) {
1604 | return newArray;
1605 | }
1606 |
1607 | return digits;
1608 | },
1609 |
1610 | /**
1611 | * Adds X second to the current time
1612 | */
1613 |
1614 | addSeconds: function(x) {
1615 | if(this.time instanceof Date) {
1616 | this.time.setSeconds(this.time.getSeconds() + x);
1617 | }
1618 | else {
1619 | this.time += x;
1620 | }
1621 | },
1622 |
1623 | /**
1624 | * Adds 1 second to the current time
1625 | */
1626 |
1627 | addSecond: function() {
1628 | this.addSeconds(1);
1629 | },
1630 |
1631 | /**
1632 | * Substracts X seconds from the current time
1633 | */
1634 |
1635 | subSeconds: function(x) {
1636 | if(this.time instanceof Date) {
1637 | this.time.setSeconds(this.time.getSeconds() - x);
1638 | }
1639 | else {
1640 | this.time -= x;
1641 | }
1642 | },
1643 |
1644 | /**
1645 | * Substracts 1 second from the current time
1646 | */
1647 |
1648 | subSecond: function() {
1649 | this.subSeconds(1);
1650 | },
1651 |
1652 | /**
1653 | * Converts the object to a human readable string
1654 | */
1655 |
1656 | toString: function() {
1657 | return this.getTimeSeconds().toString();
1658 | }
1659 |
1660 | /*
1661 | getYears: function() {
1662 | return Math.floor(this.time / 60 / 60 / 24 / 7 / 52);
1663 | },
1664 |
1665 | getDecades: function() {
1666 | return Math.floor(this.getWeeks() / 10);
1667 | }*/
1668 | });
1669 |
1670 | }(jQuery));
1671 |
1672 | /*jshint smarttabs:true */
1673 |
1674 | /**
1675 | * FlipClock.js
1676 | *
1677 | * @author Justin Kimbrell
1678 | * @copyright 2013 - Objective HTML, LLC
1679 | * @licesnse http://www.opensource.org/licenses/mit-license.php
1680 | */
1681 |
1682 | (function($) {
1683 |
1684 | "use strict";
1685 |
1686 | /**
1687 | * The FlipClock.Timer object managers the JS timers
1688 | *
1689 | * @param object The parent FlipClock.Factory object
1690 | * @param object Override the default options
1691 | */
1692 |
1693 | FlipClock.Timer = FlipClock.Base.extend({
1694 |
1695 | /**
1696 | * Callbacks
1697 | */
1698 |
1699 | callbacks: {
1700 | destroy: false,
1701 | create: false,
1702 | init: false,
1703 | interval: false,
1704 | start: false,
1705 | stop: false,
1706 | reset: false
1707 | },
1708 |
1709 | /**
1710 | * FlipClock timer count (how many intervals have passed)
1711 | */
1712 |
1713 | count: 0,
1714 |
1715 | /**
1716 | * The parent FlipClock.Factory object
1717 | */
1718 |
1719 | factory: false,
1720 |
1721 | /**
1722 | * Timer interval (1 second by default)
1723 | */
1724 |
1725 | interval: 1000,
1726 |
1727 | /**
1728 | * The rate of the animation in milliseconds (not currently in use)
1729 | */
1730 |
1731 | animationRate: 1000,
1732 |
1733 | /**
1734 | * Constructor
1735 | *
1736 | * @return void
1737 | */
1738 |
1739 | constructor: function(factory, options) {
1740 | this.base(options);
1741 | this.factory = factory;
1742 | this.callback(this.callbacks.init);
1743 | this.callback(this.callbacks.create);
1744 | },
1745 |
1746 | /**
1747 | * This method gets the elapsed the time as an interger
1748 | *
1749 | * @return void
1750 | */
1751 |
1752 | getElapsed: function() {
1753 | return this.count * this.interval;
1754 | },
1755 |
1756 | /**
1757 | * This method gets the elapsed the time as a Date object
1758 | *
1759 | * @return void
1760 | */
1761 |
1762 | getElapsedTime: function() {
1763 | return new Date(this.time + this.getElapsed());
1764 | },
1765 |
1766 | /**
1767 | * This method is resets the timer
1768 | *
1769 | * @param callback This method resets the timer back to 0
1770 | * @return void
1771 | */
1772 |
1773 | reset: function(callback) {
1774 | clearInterval(this.timer);
1775 | this.count = 0;
1776 | this._setInterval(callback);
1777 | this.callback(this.callbacks.reset);
1778 | },
1779 |
1780 | /**
1781 | * This method is starts the timer
1782 | *
1783 | * @param callback A function that is called once the timer is destroyed
1784 | * @return void
1785 | */
1786 |
1787 | start: function(callback) {
1788 | this.factory.running = true;
1789 | this._createTimer(callback);
1790 | this.callback(this.callbacks.start);
1791 | },
1792 |
1793 | /**
1794 | * This method is stops the timer
1795 | *
1796 | * @param callback A function that is called once the timer is destroyed
1797 | * @return void
1798 | */
1799 |
1800 | stop: function(callback) {
1801 | this.factory.running = false;
1802 | this._clearInterval(callback);
1803 | this.callback(this.callbacks.stop);
1804 | this.callback(callback);
1805 | },
1806 |
1807 | /**
1808 | * Clear the timer interval
1809 | *
1810 | * @return void
1811 | */
1812 |
1813 | _clearInterval: function() {
1814 | clearInterval(this.timer);
1815 | },
1816 |
1817 | /**
1818 | * Create the timer object
1819 | *
1820 | * @param callback A function that is called once the timer is created
1821 | * @return void
1822 | */
1823 |
1824 | _createTimer: function(callback) {
1825 | this._setInterval(callback);
1826 | },
1827 |
1828 | /**
1829 | * Destroy the timer object
1830 | *
1831 | * @param callback A function that is called once the timer is destroyed
1832 | * @return void
1833 | */
1834 |
1835 | _destroyTimer: function(callback) {
1836 | this._clearInterval();
1837 | this.timer = false;
1838 | this.callback(callback);
1839 | this.callback(this.callbacks.destroy);
1840 | },
1841 |
1842 | /**
1843 | * This method is called each time the timer interval is ran
1844 | *
1845 | * @param callback A function that is called once the timer is destroyed
1846 | * @return void
1847 | */
1848 |
1849 | _interval: function(callback) {
1850 | this.callback(this.callbacks.interval);
1851 | this.callback(callback);
1852 | this.count++;
1853 | },
1854 |
1855 | /**
1856 | * This sets the timer interval
1857 | *
1858 | * @param callback A function that is called once the timer is destroyed
1859 | * @return void
1860 | */
1861 |
1862 | _setInterval: function(callback) {
1863 | var t = this;
1864 |
1865 | t._interval(callback);
1866 |
1867 | t.timer = setInterval(function() {
1868 | t._interval(callback);
1869 | }, this.interval);
1870 | }
1871 |
1872 | });
1873 |
1874 | }(jQuery));
1875 |
1876 | (function($) {
1877 |
1878 | /**
1879 | * Twenty-Four Hour Clock Face
1880 | *
1881 | * This class will generate a twenty-four our clock for FlipClock.js
1882 | *
1883 | * @param object The parent FlipClock.Factory object
1884 | * @param object An object of properties to override the default
1885 | */
1886 |
1887 | FlipClock.TwentyFourHourClockFace = FlipClock.Face.extend({
1888 |
1889 | /**
1890 | * Constructor
1891 | *
1892 | * @param object The parent FlipClock.Factory object
1893 | * @param object An object of properties to override the default
1894 | */
1895 |
1896 | constructor: function(factory, options) {
1897 | this.base(factory, options);
1898 | },
1899 |
1900 | /**
1901 | * Build the clock face
1902 | *
1903 | * @param object Pass the time that should be used to display on the clock.
1904 | */
1905 |
1906 | build: function(time) {
1907 | var t = this;
1908 | var children = this.factory.$el.find('ul');
1909 |
1910 | if(!this.factory.time.time) {
1911 | this.factory.original = new Date();
1912 |
1913 | this.factory.time = new FlipClock.Time(this.factory, this.factory.original);
1914 | }
1915 |
1916 | var time = time ? time : this.factory.time.getMilitaryTime(false, this.showSeconds);
1917 |
1918 | if(time.length > children.length) {
1919 | $.each(time, function(i, digit) {
1920 | t.createList(digit);
1921 | });
1922 | }
1923 |
1924 | this.createDivider();
1925 | this.createDivider();
1926 |
1927 | $(this.dividers[0]).insertBefore(this.lists[this.lists.length - 2].$el);
1928 | $(this.dividers[1]).insertBefore(this.lists[this.lists.length - 4].$el);
1929 |
1930 | this.base();
1931 | },
1932 |
1933 | /**
1934 | * Flip the clock face
1935 | */
1936 |
1937 | flip: function(time, doNotAddPlayClass) {
1938 | this.autoIncrement();
1939 |
1940 | time = time ? time : this.factory.time.getMilitaryTime(false, this.showSeconds);
1941 |
1942 | this.base(time, doNotAddPlayClass);
1943 | }
1944 |
1945 | });
1946 |
1947 | }(jQuery));
1948 | (function($) {
1949 |
1950 | /**
1951 | * Counter Clock Face
1952 | *
1953 | * This class will generate a generice flip counter. The timer has been
1954 | * disabled. clock.increment() and clock.decrement() have been added.
1955 | *
1956 | * @param object The parent FlipClock.Factory object
1957 | * @param object An object of properties to override the default
1958 | */
1959 |
1960 | FlipClock.CounterFace = FlipClock.Face.extend({
1961 |
1962 | /**
1963 | * Tells the counter clock face if it should auto-increment
1964 | */
1965 |
1966 | shouldAutoIncrement: false,
1967 |
1968 | /**
1969 | * Constructor
1970 | *
1971 | * @param object The parent FlipClock.Factory object
1972 | * @param object An object of properties to override the default
1973 | */
1974 |
1975 | constructor: function(factory, options) {
1976 |
1977 | if(typeof options != "object") {
1978 | options = {};
1979 | }
1980 |
1981 | factory.autoStart = options.autoStart ? true : false;
1982 |
1983 | if(options.autoStart) {
1984 | this.shouldAutoIncrement = true;
1985 | }
1986 |
1987 | factory.increment = function() {
1988 | factory.countdown = false;
1989 | factory.setTime(factory.getTime().getTimeSeconds() + 1);
1990 | };
1991 |
1992 | factory.decrement = function() {
1993 | factory.countdown = true;
1994 | var time = factory.getTime().getTimeSeconds();
1995 | if(time > 0) {
1996 | factory.setTime(time - 1);
1997 | }
1998 | };
1999 |
2000 | factory.setValue = function(digits) {
2001 | factory.setTime(digits);
2002 | };
2003 |
2004 | factory.setCounter = function(digits) {
2005 | factory.setTime(digits);
2006 | };
2007 |
2008 | this.base(factory, options);
2009 | },
2010 |
2011 | /**
2012 | * Build the clock face
2013 | */
2014 |
2015 | build: function() {
2016 | var t = this;
2017 | var children = this.factory.$el.find('ul');
2018 | var time = this.factory.getTime().digitize([this.factory.getTime().time]);
2019 |
2020 | if(time.length > children.length) {
2021 | $.each(time, function(i, digit) {
2022 | var list = t.createList(digit);
2023 |
2024 | list.select(digit);
2025 | });
2026 |
2027 | }
2028 |
2029 | $.each(this.lists, function(i, list) {
2030 | list.play();
2031 | });
2032 |
2033 | this.base();
2034 | },
2035 |
2036 | /**
2037 | * Flip the clock face
2038 | */
2039 |
2040 | flip: function(time, doNotAddPlayClass) {
2041 | if(this.shouldAutoIncrement) {
2042 | this.autoIncrement();
2043 | }
2044 |
2045 | if(!time) {
2046 | time = this.factory.getTime().digitize([this.factory.getTime().time]);
2047 | }
2048 |
2049 | this.base(time, doNotAddPlayClass);
2050 | },
2051 |
2052 | /**
2053 | * Reset the clock face
2054 | */
2055 |
2056 | reset: function() {
2057 | this.factory.time = new FlipClock.Time(
2058 | this.factory,
2059 | this.factory.original ? Math.round(this.factory.original) : 0
2060 | );
2061 |
2062 | this.flip();
2063 | }
2064 | });
2065 |
2066 | }(jQuery));
2067 | (function($) {
2068 |
2069 | /**
2070 | * Daily Counter Clock Face
2071 | *
2072 | * This class will generate a daily counter for FlipClock.js. A
2073 | * daily counter will track days, hours, minutes, and seconds. If
2074 | * the number of available digits is exceeded in the count, a new
2075 | * digit will be created.
2076 | *
2077 | * @param object The parent FlipClock.Factory object
2078 | * @param object An object of properties to override the default
2079 | */
2080 |
2081 | FlipClock.DailyCounterFace = FlipClock.Face.extend({
2082 |
2083 | showSeconds: true,
2084 |
2085 | /**
2086 | * Constructor
2087 | *
2088 | * @param object The parent FlipClock.Factory object
2089 | * @param object An object of properties to override the default
2090 | */
2091 |
2092 | constructor: function(factory, options) {
2093 | this.base(factory, options);
2094 | },
2095 |
2096 | /**
2097 | * Build the clock face
2098 | */
2099 |
2100 | build: function(time) {
2101 | var t = this;
2102 | var children = this.factory.$el.find('ul');
2103 | var offset = 0;
2104 |
2105 | time = time ? time : this.factory.time.getDayCounter(this.showSeconds);
2106 |
2107 | if(time.length > children.length) {
2108 | $.each(time, function(i, digit) {
2109 | t.createList(digit);
2110 | });
2111 | }
2112 |
2113 | if(this.showSeconds) {
2114 | $(this.createDivider('Seconds')).insertBefore(this.lists[this.lists.length - 2].$el);
2115 | }
2116 | else
2117 | {
2118 | offset = 2;
2119 | }
2120 |
2121 | $(this.createDivider('Minutes')).insertBefore(this.lists[this.lists.length - 4 + offset].$el);
2122 | $(this.createDivider('Hours')).insertBefore(this.lists[this.lists.length - 6 + offset].$el);
2123 | $(this.createDivider('Days', true)).insertBefore(this.lists[0].$el);
2124 |
2125 | this.base();
2126 | },
2127 |
2128 | /**
2129 | * Flip the clock face
2130 | */
2131 |
2132 | flip: function(time, doNotAddPlayClass) {
2133 | if(!time) {
2134 | time = this.factory.time.getDayCounter(this.showSeconds);
2135 | }
2136 |
2137 | this.autoIncrement();
2138 |
2139 | this.base(time, doNotAddPlayClass);
2140 | }
2141 |
2142 | });
2143 |
2144 | }(jQuery));
2145 | (function($) {
2146 |
2147 | /**
2148 | * Hourly Counter Clock Face
2149 | *
2150 | * This class will generate an hourly counter for FlipClock.js. An
2151 | * hour counter will track hours, minutes, and seconds. If number of
2152 | * available digits is exceeded in the count, a new digit will be
2153 | * created.
2154 | *
2155 | * @param object The parent FlipClock.Factory object
2156 | * @param object An object of properties to override the default
2157 | */
2158 |
2159 | FlipClock.HourlyCounterFace = FlipClock.Face.extend({
2160 |
2161 | // clearExcessDigits: true,
2162 |
2163 | /**
2164 | * Constructor
2165 | *
2166 | * @param object The parent FlipClock.Factory object
2167 | * @param object An object of properties to override the default
2168 | */
2169 |
2170 | constructor: function(factory, options) {
2171 | this.base(factory, options);
2172 | },
2173 |
2174 | /**
2175 | * Build the clock face
2176 | */
2177 |
2178 | build: function(excludeHours, time) {
2179 | var t = this;
2180 | var children = this.factory.$el.find('ul');
2181 |
2182 | time = time ? time : this.factory.time.getHourCounter();
2183 |
2184 | if(time.length > children.length) {
2185 | $.each(time, function(i, digit) {
2186 | t.createList(digit);
2187 | });
2188 | }
2189 |
2190 | $(this.createDivider('Seconds')).insertBefore(this.lists[this.lists.length - 2].$el);
2191 | $(this.createDivider('Minutes')).insertBefore(this.lists[this.lists.length - 4].$el);
2192 |
2193 | if(!excludeHours) {
2194 | $(this.createDivider('Hours', true)).insertBefore(this.lists[0].$el);
2195 | }
2196 |
2197 | this.base();
2198 | },
2199 |
2200 | /**
2201 | * Flip the clock face
2202 | */
2203 |
2204 | flip: function(time, doNotAddPlayClass) {
2205 | if(!time) {
2206 | time = this.factory.time.getHourCounter();
2207 | }
2208 |
2209 | this.autoIncrement();
2210 |
2211 | this.base(time, doNotAddPlayClass);
2212 | },
2213 |
2214 | /**
2215 | * Append a newly created list to the clock
2216 | */
2217 |
2218 | appendDigitToClock: function(obj) {
2219 | this.base(obj);
2220 |
2221 | this.dividers[0].insertAfter(this.dividers[0].next());
2222 | }
2223 |
2224 | });
2225 |
2226 | }(jQuery));
2227 | (function($) {
2228 |
2229 | /**
2230 | * Minute Counter Clock Face
2231 | *
2232 | * This class will generate a minute counter for FlipClock.js. A
2233 | * minute counter will track minutes and seconds. If an hour is
2234 | * reached, the counter will reset back to 0. (4 digits max)
2235 | *
2236 | * @param object The parent FlipClock.Factory object
2237 | * @param object An object of properties to override the default
2238 | */
2239 |
2240 | FlipClock.MinuteCounterFace = FlipClock.HourlyCounterFace.extend({
2241 |
2242 | clearExcessDigits: false,
2243 |
2244 | /**
2245 | * Constructor
2246 | *
2247 | * @param object The parent FlipClock.Factory object
2248 | * @param object An object of properties to override the default
2249 | */
2250 |
2251 | constructor: function(factory, options) {
2252 | this.base(factory, options);
2253 | },
2254 |
2255 | /**
2256 | * Build the clock face
2257 | */
2258 |
2259 | build: function() {
2260 | this.base(true, this.factory.time.getMinuteCounter());
2261 | },
2262 |
2263 | /**
2264 | * Flip the clock face
2265 | */
2266 |
2267 | flip: function(time, doNotAddPlayClass) {
2268 | if(!time) {
2269 | time = this.factory.time.getMinuteCounter();
2270 | }
2271 |
2272 | this.base(time, doNotAddPlayClass);
2273 | }
2274 |
2275 | });
2276 |
2277 | }(jQuery));
2278 | (function($) {
2279 |
2280 | /**
2281 | * Twelve Hour Clock Face
2282 | *
2283 | * This class will generate a twelve hour clock for FlipClock.js
2284 | *
2285 | * @param object The parent FlipClock.Factory object
2286 | * @param object An object of properties to override the default
2287 | */
2288 |
2289 | FlipClock.TwelveHourClockFace = FlipClock.TwentyFourHourClockFace.extend({
2290 |
2291 | /**
2292 | * The meridium jQuery DOM object
2293 | */
2294 |
2295 | meridium: false,
2296 |
2297 | /**
2298 | * The meridium text as string for easy access
2299 | */
2300 |
2301 | meridiumText: 'AM',
2302 |
2303 | /**
2304 | * Build the clock face
2305 | *
2306 | * @param object Pass the time that should be used to display on the clock.
2307 | */
2308 |
2309 | build: function() {
2310 | var t = this;
2311 |
2312 | var time = this.factory.time.getTime(false, this.showSeconds);
2313 |
2314 | this.base(time);
2315 | this.meridiumText = this.getMeridium();
2316 | this.meridium = $([
2317 | ''
2322 | ].join(''));
2323 |
2324 | this.meridium.insertAfter(this.lists[this.lists.length-1].$el);
2325 | },
2326 |
2327 | /**
2328 | * Flip the clock face
2329 | */
2330 |
2331 | flip: function(time, doNotAddPlayClass) {
2332 | if(this.meridiumText != this.getMeridium()) {
2333 | this.meridiumText = this.getMeridium();
2334 | this.meridium.find('a').html(this.meridiumText);
2335 | }
2336 | this.base(this.factory.time.getTime(false, this.showSeconds), doNotAddPlayClass);
2337 | },
2338 |
2339 | /**
2340 | * Get the current meridium
2341 | *
2342 | * @return string Returns the meridium (AM|PM)
2343 | */
2344 |
2345 | getMeridium: function() {
2346 | return new Date().getHours() >= 12 ? 'PM' : 'AM';
2347 | },
2348 |
2349 | /**
2350 | * Is it currently in the post-medirium?
2351 | *
2352 | * @return bool Returns true or false
2353 | */
2354 |
2355 | isPM: function() {
2356 | return this.getMeridium() == 'PM' ? true : false;
2357 | },
2358 |
2359 | /**
2360 | * Is it currently before the post-medirium?
2361 | *
2362 | * @return bool Returns true or false
2363 | */
2364 |
2365 | isAM: function() {
2366 | return this.getMeridium() == 'AM' ? true : false;
2367 | }
2368 |
2369 | });
2370 |
2371 | }(jQuery));
2372 | (function($) {
2373 |
2374 | /**
2375 | * FlipClock Arabic Language Pack
2376 | *
2377 | * This class will be used to translate tokens into the Arabic language.
2378 | *
2379 | */
2380 |
2381 | FlipClock.Lang.Arabic = {
2382 |
2383 | 'years' : 'سنوات',
2384 | 'months' : 'شهور',
2385 | 'days' : 'أيام',
2386 | 'hours' : 'ساعات',
2387 | 'minutes' : 'دقائق',
2388 | 'seconds' : 'ثواني'
2389 |
2390 | };
2391 |
2392 | /* Create various aliases for convenience */
2393 |
2394 | FlipClock.Lang['ar'] = FlipClock.Lang.Arabic;
2395 | FlipClock.Lang['ar-ar'] = FlipClock.Lang.Arabic;
2396 | FlipClock.Lang['arabic'] = FlipClock.Lang.Arabic;
2397 |
2398 | }(jQuery));
2399 | (function($) {
2400 |
2401 | /**
2402 | * FlipClock Danish Language Pack
2403 | *
2404 | * This class will used to translate tokens into the Danish language.
2405 | *
2406 | */
2407 |
2408 | FlipClock.Lang.Danish = {
2409 |
2410 | 'years' : 'År',
2411 | 'months' : 'Måneder',
2412 | 'days' : 'Dage',
2413 | 'hours' : 'Timer',
2414 | 'minutes' : 'Minutter',
2415 | 'seconds' : 'Sekunder'
2416 |
2417 | };
2418 |
2419 | /* Create various aliases for convenience */
2420 |
2421 | FlipClock.Lang['da'] = FlipClock.Lang.Danish;
2422 | FlipClock.Lang['da-dk'] = FlipClock.Lang.Danish;
2423 | FlipClock.Lang['danish'] = FlipClock.Lang.Danish;
2424 |
2425 | }(jQuery));
2426 | (function($) {
2427 |
2428 | /**
2429 | * FlipClock German Language Pack
2430 | *
2431 | * This class will used to translate tokens into the German language.
2432 | *
2433 | */
2434 |
2435 | FlipClock.Lang.German = {
2436 |
2437 | 'years' : 'Jahre',
2438 | 'months' : 'Monate',
2439 | 'days' : 'Tage',
2440 | 'hours' : 'Stunden',
2441 | 'minutes' : 'Minuten',
2442 | 'seconds' : 'Sekunden'
2443 |
2444 | };
2445 |
2446 | /* Create various aliases for convenience */
2447 |
2448 | FlipClock.Lang['de'] = FlipClock.Lang.German;
2449 | FlipClock.Lang['de-de'] = FlipClock.Lang.German;
2450 | FlipClock.Lang['german'] = FlipClock.Lang.German;
2451 |
2452 | }(jQuery));
2453 | (function($) {
2454 |
2455 | /**
2456 | * FlipClock English Language Pack
2457 | *
2458 | * This class will used to translate tokens into the English language.
2459 | *
2460 | */
2461 |
2462 | FlipClock.Lang.English = {
2463 |
2464 | 'years' : 'Years',
2465 | 'months' : 'Months',
2466 | 'days' : 'Days',
2467 | 'hours' : 'Hours',
2468 | 'minutes' : 'Minutes',
2469 | 'seconds' : 'Seconds'
2470 |
2471 | };
2472 |
2473 | /* Create various aliases for convenience */
2474 |
2475 | FlipClock.Lang['en'] = FlipClock.Lang.English;
2476 | FlipClock.Lang['en-us'] = FlipClock.Lang.English;
2477 | FlipClock.Lang['english'] = FlipClock.Lang.English;
2478 |
2479 | }(jQuery));
2480 | (function($) {
2481 |
2482 | /**
2483 | * FlipClock Spanish Language Pack
2484 | *
2485 | * This class will used to translate tokens into the Spanish language.
2486 | *
2487 | */
2488 |
2489 | FlipClock.Lang.Spanish = {
2490 |
2491 | 'years' : 'Años',
2492 | 'months' : 'Meses',
2493 | 'days' : 'DÍas',
2494 | 'hours' : 'Horas',
2495 | 'minutes' : 'Minutos',
2496 | 'seconds' : 'Segundo'
2497 |
2498 | };
2499 |
2500 | /* Create various aliases for convenience */
2501 |
2502 | FlipClock.Lang['es'] = FlipClock.Lang.Spanish;
2503 | FlipClock.Lang['es-es'] = FlipClock.Lang.Spanish;
2504 | FlipClock.Lang['spanish'] = FlipClock.Lang.Spanish;
2505 |
2506 | }(jQuery));
2507 | (function($) {
2508 |
2509 | /**
2510 | * FlipClock Finnish Language Pack
2511 | *
2512 | * This class will used to translate tokens into the Finnish language.
2513 | *
2514 | */
2515 |
2516 | FlipClock.Lang.Finnish = {
2517 |
2518 | 'years' : 'Vuotta',
2519 | 'months' : 'Kuukautta',
2520 | 'days' : 'Päivää',
2521 | 'hours' : 'Tuntia',
2522 | 'minutes' : 'Minuuttia',
2523 | 'seconds' : 'Sekuntia'
2524 |
2525 | };
2526 |
2527 | /* Create various aliases for convenience */
2528 |
2529 | FlipClock.Lang['fi'] = FlipClock.Lang.Finnish;
2530 | FlipClock.Lang['fi-fi'] = FlipClock.Lang.Finnish;
2531 | FlipClock.Lang['finnish'] = FlipClock.Lang.Finnish;
2532 |
2533 | }(jQuery));
2534 |
2535 | (function($) {
2536 |
2537 | /**
2538 | * FlipClock Canadian French Language Pack
2539 | *
2540 | * This class will used to translate tokens into the Canadian French language.
2541 | *
2542 | */
2543 |
2544 | FlipClock.Lang.French = {
2545 |
2546 | 'years' : 'Ans',
2547 | 'months' : 'Mois',
2548 | 'days' : 'Jours',
2549 | 'hours' : 'Heures',
2550 | 'minutes' : 'Minutes',
2551 | 'seconds' : 'Secondes'
2552 |
2553 | };
2554 |
2555 | /* Create various aliases for convenience */
2556 |
2557 | FlipClock.Lang['fr'] = FlipClock.Lang.French;
2558 | FlipClock.Lang['fr-ca'] = FlipClock.Lang.French;
2559 | FlipClock.Lang['french'] = FlipClock.Lang.French;
2560 |
2561 | }(jQuery));
2562 |
2563 | (function($) {
2564 |
2565 | /**
2566 | * FlipClock Italian Language Pack
2567 | *
2568 | * This class will used to translate tokens into the Italian language.
2569 | *
2570 | */
2571 |
2572 | FlipClock.Lang.Italian = {
2573 |
2574 | 'years' : 'Anni',
2575 | 'months' : 'Mesi',
2576 | 'days' : 'Giorni',
2577 | 'hours' : 'Ore',
2578 | 'minutes' : 'Minuti',
2579 | 'seconds' : 'Secondi'
2580 |
2581 | };
2582 |
2583 | /* Create various aliases for convenience */
2584 |
2585 | FlipClock.Lang['it'] = FlipClock.Lang.Italian;
2586 | FlipClock.Lang['it-it'] = FlipClock.Lang.Italian;
2587 | FlipClock.Lang['italian'] = FlipClock.Lang.Italian;
2588 |
2589 | }(jQuery));
2590 |
2591 | (function($) {
2592 |
2593 | /**
2594 | * FlipClock Latvian Language Pack
2595 | *
2596 | * This class will used to translate tokens into the Latvian language.
2597 | *
2598 | */
2599 |
2600 | FlipClock.Lang.Latvian = {
2601 |
2602 | 'years' : 'Gadi',
2603 | 'months' : 'Mēneši',
2604 | 'days' : 'Dienas',
2605 | 'hours' : 'Stundas',
2606 | 'minutes' : 'Minūtes',
2607 | 'seconds' : 'Sekundes'
2608 |
2609 | };
2610 |
2611 | /* Create various aliases for convenience */
2612 |
2613 | FlipClock.Lang['lv'] = FlipClock.Lang.Latvian;
2614 | FlipClock.Lang['lv-lv'] = FlipClock.Lang.Latvian;
2615 | FlipClock.Lang['latvian'] = FlipClock.Lang.Latvian;
2616 |
2617 | }(jQuery));
2618 | (function($) {
2619 |
2620 | /**
2621 | * FlipClock Dutch Language Pack
2622 | *
2623 | * This class will used to translate tokens into the Dutch language.
2624 | */
2625 |
2626 | FlipClock.Lang.Dutch = {
2627 |
2628 | 'years' : 'Jaren',
2629 | 'months' : 'Maanden',
2630 | 'days' : 'Dagen',
2631 | 'hours' : 'Uren',
2632 | 'minutes' : 'Minuten',
2633 | 'seconds' : 'Seconden'
2634 |
2635 | };
2636 |
2637 | /* Create various aliases for convenience */
2638 |
2639 | FlipClock.Lang['nl'] = FlipClock.Lang.Dutch;
2640 | FlipClock.Lang['nl-be'] = FlipClock.Lang.Dutch;
2641 | FlipClock.Lang['dutch'] = FlipClock.Lang.Dutch;
2642 |
2643 | }(jQuery));
2644 |
2645 | (function($) {
2646 |
2647 | /**
2648 | * FlipClock Norwegian-Bokmål Language Pack
2649 | *
2650 | * This class will used to translate tokens into the Norwegian language.
2651 | *
2652 | */
2653 |
2654 | FlipClock.Lang.Norwegian = {
2655 |
2656 | 'years' : 'År',
2657 | 'months' : 'Måneder',
2658 | 'days' : 'Dager',
2659 | 'hours' : 'Timer',
2660 | 'minutes' : 'Minutter',
2661 | 'seconds' : 'Sekunder'
2662 |
2663 | };
2664 |
2665 | /* Create various aliases for convenience */
2666 |
2667 | FlipClock.Lang['no'] = FlipClock.Lang.Norwegian;
2668 | FlipClock.Lang['nb'] = FlipClock.Lang.Norwegian;
2669 | FlipClock.Lang['no-nb'] = FlipClock.Lang.Norwegian;
2670 | FlipClock.Lang['norwegian'] = FlipClock.Lang.Norwegian;
2671 |
2672 | }(jQuery));
2673 |
2674 | (function($) {
2675 |
2676 | /**
2677 | * FlipClock Portuguese Language Pack
2678 | *
2679 | * This class will used to translate tokens into the Portuguese language.
2680 | *
2681 | */
2682 |
2683 | FlipClock.Lang.Portuguese = {
2684 |
2685 | 'years' : 'Anos',
2686 | 'months' : 'Meses',
2687 | 'days' : 'Dias',
2688 | 'hours' : 'Horas',
2689 | 'minutes' : 'Minutos',
2690 | 'seconds' : 'Segundos'
2691 |
2692 | };
2693 |
2694 | /* Create various aliases for convenience */
2695 |
2696 | FlipClock.Lang['pt'] = FlipClock.Lang.Portuguese;
2697 | FlipClock.Lang['pt-br'] = FlipClock.Lang.Portuguese;
2698 | FlipClock.Lang['portuguese'] = FlipClock.Lang.Portuguese;
2699 |
2700 | }(jQuery));
2701 | (function($) {
2702 |
2703 | /**
2704 | * FlipClock Russian Language Pack
2705 | *
2706 | * This class will used to translate tokens into the Russian language.
2707 | *
2708 | */
2709 |
2710 | FlipClock.Lang.Russian = {
2711 |
2712 | 'years' : 'лет',
2713 | 'months' : 'месяцев',
2714 | 'days' : 'дней',
2715 | 'hours' : 'часов',
2716 | 'minutes' : 'минут',
2717 | 'seconds' : 'секунд'
2718 |
2719 | };
2720 |
2721 | /* Create various aliases for convenience */
2722 |
2723 | FlipClock.Lang['ru'] = FlipClock.Lang.Russian;
2724 | FlipClock.Lang['ru-ru'] = FlipClock.Lang.Russian;
2725 | FlipClock.Lang['russian'] = FlipClock.Lang.Russian;
2726 |
2727 | }(jQuery));
2728 | (function($) {
2729 |
2730 | /**
2731 | * FlipClock Swedish Language Pack
2732 | *
2733 | * This class will used to translate tokens into the Swedish language.
2734 | *
2735 | */
2736 |
2737 | FlipClock.Lang.Swedish = {
2738 |
2739 | 'years' : 'År',
2740 | 'months' : 'Månader',
2741 | 'days' : 'Dagar',
2742 | 'hours' : 'Timmar',
2743 | 'minutes' : 'Minuter',
2744 | 'seconds' : 'Sekunder'
2745 |
2746 | };
2747 |
2748 | /* Create various aliases for convenience */
2749 |
2750 | FlipClock.Lang['sv'] = FlipClock.Lang.Swedish;
2751 | FlipClock.Lang['sv-se'] = FlipClock.Lang.Swedish;
2752 | FlipClock.Lang['swedish'] = FlipClock.Lang.Swedish;
2753 |
2754 | }(jQuery));
2755 |
--------------------------------------------------------------------------------
/css/animate.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | /*!
3 | Animate.css - http://daneden.me/animate
4 | Licensed under the MIT license - http://opensource.org/licenses/MIT
5 |
6 | Copyright (c) 2014 Daniel Eden
7 | */
8 |
9 | .animated {
10 | -webkit-animation-duration: 1s;
11 | animation-duration: 1s;
12 | -webkit-animation-fill-mode: both;
13 | animation-fill-mode: both;
14 | }
15 |
16 | .animated.infinite {
17 | -webkit-animation-iteration-count: infinite;
18 | animation-iteration-count: infinite;
19 | }
20 |
21 | .animated.hinge {
22 | -webkit-animation-duration: 2s;
23 | animation-duration: 2s;
24 | }
25 |
26 | @-webkit-keyframes bounce {
27 | 0%, 20%, 53%, 80%, 100% {
28 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
29 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
30 | -webkit-transform: translate3d(0,0,0);
31 | transform: translate3d(0,0,0);
32 | }
33 |
34 | 40%, 43% {
35 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
36 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
37 | -webkit-transform: translate3d(0, -30px, 0);
38 | transform: translate3d(0, -30px, 0);
39 | }
40 |
41 | 70% {
42 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
43 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
44 | -webkit-transform: translate3d(0, -15px, 0);
45 | transform: translate3d(0, -15px, 0);
46 | }
47 |
48 | 90% {
49 | -webkit-transform: translate3d(0,-4px,0);
50 | transform: translate3d(0,-4px,0);
51 | }
52 | }
53 |
54 | @keyframes bounce {
55 | 0%, 20%, 53%, 80%, 100% {
56 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
57 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
58 | -webkit-transform: translate3d(0,0,0);
59 | transform: translate3d(0,0,0);
60 | }
61 |
62 | 40%, 43% {
63 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
64 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
65 | -webkit-transform: translate3d(0, -30px, 0);
66 | transform: translate3d(0, -30px, 0);
67 | }
68 |
69 | 70% {
70 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
71 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
72 | -webkit-transform: translate3d(0, -15px, 0);
73 | transform: translate3d(0, -15px, 0);
74 | }
75 |
76 | 90% {
77 | -webkit-transform: translate3d(0,-4px,0);
78 | transform: translate3d(0,-4px,0);
79 | }
80 | }
81 |
82 | .bounce {
83 | -webkit-animation-name: bounce;
84 | animation-name: bounce;
85 | -webkit-transform-origin: center bottom;
86 | -ms-transform-origin: center bottom;
87 | transform-origin: center bottom;
88 | }
89 |
90 | @-webkit-keyframes flash {
91 | 0%, 50%, 100% {
92 | opacity: 1;
93 | }
94 |
95 | 25%, 75% {
96 | opacity: 0;
97 | }
98 | }
99 |
100 | @keyframes flash {
101 | 0%, 50%, 100% {
102 | opacity: 1;
103 | }
104 |
105 | 25%, 75% {
106 | opacity: 0;
107 | }
108 | }
109 |
110 | .flash {
111 | -webkit-animation-name: flash;
112 | animation-name: flash;
113 | }
114 |
115 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
116 |
117 | @-webkit-keyframes pulse {
118 | 0% {
119 | -webkit-transform: scale3d(1, 1, 1);
120 | transform: scale3d(1, 1, 1);
121 | }
122 |
123 | 50% {
124 | -webkit-transform: scale3d(1.05, 1.05, 1.05);
125 | transform: scale3d(1.05, 1.05, 1.05);
126 | }
127 |
128 | 100% {
129 | -webkit-transform: scale3d(1, 1, 1);
130 | transform: scale3d(1, 1, 1);
131 | }
132 | }
133 |
134 | @keyframes pulse {
135 | 0% {
136 | -webkit-transform: scale3d(1, 1, 1);
137 | transform: scale3d(1, 1, 1);
138 | }
139 |
140 | 50% {
141 | -webkit-transform: scale3d(1.05, 1.05, 1.05);
142 | transform: scale3d(1.05, 1.05, 1.05);
143 | }
144 |
145 | 100% {
146 | -webkit-transform: scale3d(1, 1, 1);
147 | transform: scale3d(1, 1, 1);
148 | }
149 | }
150 |
151 | .pulse {
152 | -webkit-animation-name: pulse;
153 | animation-name: pulse;
154 | }
155 |
156 | @-webkit-keyframes rubberBand {
157 | 0% {
158 | -webkit-transform: scale3d(1, 1, 1);
159 | transform: scale3d(1, 1, 1);
160 | }
161 |
162 | 30% {
163 | -webkit-transform: scale3d(1.25, 0.75, 1);
164 | transform: scale3d(1.25, 0.75, 1);
165 | }
166 |
167 | 40% {
168 | -webkit-transform: scale3d(0.75, 1.25, 1);
169 | transform: scale3d(0.75, 1.25, 1);
170 | }
171 |
172 | 50% {
173 | -webkit-transform: scale3d(1.15, 0.85, 1);
174 | transform: scale3d(1.15, 0.85, 1);
175 | }
176 |
177 | 65% {
178 | -webkit-transform: scale3d(.95, 1.05, 1);
179 | transform: scale3d(.95, 1.05, 1);
180 | }
181 |
182 | 75% {
183 | -webkit-transform: scale3d(1.05, .95, 1);
184 | transform: scale3d(1.05, .95, 1);
185 | }
186 |
187 | 100% {
188 | -webkit-transform: scale3d(1, 1, 1);
189 | transform: scale3d(1, 1, 1);
190 | }
191 | }
192 |
193 | @keyframes rubberBand {
194 | 0% {
195 | -webkit-transform: scale3d(1, 1, 1);
196 | transform: scale3d(1, 1, 1);
197 | }
198 |
199 | 30% {
200 | -webkit-transform: scale3d(1.25, 0.75, 1);
201 | transform: scale3d(1.25, 0.75, 1);
202 | }
203 |
204 | 40% {
205 | -webkit-transform: scale3d(0.75, 1.25, 1);
206 | transform: scale3d(0.75, 1.25, 1);
207 | }
208 |
209 | 50% {
210 | -webkit-transform: scale3d(1.15, 0.85, 1);
211 | transform: scale3d(1.15, 0.85, 1);
212 | }
213 |
214 | 65% {
215 | -webkit-transform: scale3d(.95, 1.05, 1);
216 | transform: scale3d(.95, 1.05, 1);
217 | }
218 |
219 | 75% {
220 | -webkit-transform: scale3d(1.05, .95, 1);
221 | transform: scale3d(1.05, .95, 1);
222 | }
223 |
224 | 100% {
225 | -webkit-transform: scale3d(1, 1, 1);
226 | transform: scale3d(1, 1, 1);
227 | }
228 | }
229 |
230 | .rubberBand {
231 | -webkit-animation-name: rubberBand;
232 | animation-name: rubberBand;
233 | }
234 |
235 | @-webkit-keyframes shake {
236 | 0%, 100% {
237 | -webkit-transform: translate3d(0, 0, 0);
238 | transform: translate3d(0, 0, 0);
239 | }
240 |
241 | 10%, 30%, 50%, 70%, 90% {
242 | -webkit-transform: translate3d(-10px, 0, 0);
243 | transform: translate3d(-10px, 0, 0);
244 | }
245 |
246 | 20%, 40%, 60%, 80% {
247 | -webkit-transform: translate3d(10px, 0, 0);
248 | transform: translate3d(10px, 0, 0);
249 | }
250 | }
251 |
252 | @keyframes shake {
253 | 0%, 100% {
254 | -webkit-transform: translate3d(0, 0, 0);
255 | transform: translate3d(0, 0, 0);
256 | }
257 |
258 | 10%, 30%, 50%, 70%, 90% {
259 | -webkit-transform: translate3d(-10px, 0, 0);
260 | transform: translate3d(-10px, 0, 0);
261 | }
262 |
263 | 20%, 40%, 60%, 80% {
264 | -webkit-transform: translate3d(10px, 0, 0);
265 | transform: translate3d(10px, 0, 0);
266 | }
267 | }
268 |
269 | .shake {
270 | -webkit-animation-name: shake;
271 | animation-name: shake;
272 | }
273 |
274 | @-webkit-keyframes swing {
275 | 20% {
276 | -webkit-transform: rotate3d(0, 0, 1, 15deg);
277 | transform: rotate3d(0, 0, 1, 15deg);
278 | }
279 |
280 | 40% {
281 | -webkit-transform: rotate3d(0, 0, 1, -10deg);
282 | transform: rotate3d(0, 0, 1, -10deg);
283 | }
284 |
285 | 60% {
286 | -webkit-transform: rotate3d(0, 0, 1, 5deg);
287 | transform: rotate3d(0, 0, 1, 5deg);
288 | }
289 |
290 | 80% {
291 | -webkit-transform: rotate3d(0, 0, 1, -5deg);
292 | transform: rotate3d(0, 0, 1, -5deg);
293 | }
294 |
295 | 100% {
296 | -webkit-transform: rotate3d(0, 0, 1, 0deg);
297 | transform: rotate3d(0, 0, 1, 0deg);
298 | }
299 | }
300 |
301 | @keyframes swing {
302 | 20% {
303 | -webkit-transform: rotate3d(0, 0, 1, 15deg);
304 | transform: rotate3d(0, 0, 1, 15deg);
305 | }
306 |
307 | 40% {
308 | -webkit-transform: rotate3d(0, 0, 1, -10deg);
309 | transform: rotate3d(0, 0, 1, -10deg);
310 | }
311 |
312 | 60% {
313 | -webkit-transform: rotate3d(0, 0, 1, 5deg);
314 | transform: rotate3d(0, 0, 1, 5deg);
315 | }
316 |
317 | 80% {
318 | -webkit-transform: rotate3d(0, 0, 1, -5deg);
319 | transform: rotate3d(0, 0, 1, -5deg);
320 | }
321 |
322 | 100% {
323 | -webkit-transform: rotate3d(0, 0, 1, 0deg);
324 | transform: rotate3d(0, 0, 1, 0deg);
325 | }
326 | }
327 |
328 | .swing {
329 | -webkit-transform-origin: top center;
330 | -ms-transform-origin: top center;
331 | transform-origin: top center;
332 | -webkit-animation-name: swing;
333 | animation-name: swing;
334 | }
335 |
336 | @-webkit-keyframes tada {
337 | 0% {
338 | -webkit-transform: scale3d(1, 1, 1);
339 | transform: scale3d(1, 1, 1);
340 | }
341 |
342 | 10%, 20% {
343 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
344 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
345 | }
346 |
347 | 30%, 50%, 70%, 90% {
348 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
349 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
350 | }
351 |
352 | 40%, 60%, 80% {
353 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
354 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
355 | }
356 |
357 | 100% {
358 | -webkit-transform: scale3d(1, 1, 1);
359 | transform: scale3d(1, 1, 1);
360 | }
361 | }
362 |
363 | @keyframes tada {
364 | 0% {
365 | -webkit-transform: scale3d(1, 1, 1);
366 | transform: scale3d(1, 1, 1);
367 | }
368 |
369 | 10%, 20% {
370 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
371 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
372 | }
373 |
374 | 30%, 50%, 70%, 90% {
375 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
376 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
377 | }
378 |
379 | 40%, 60%, 80% {
380 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
381 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
382 | }
383 |
384 | 100% {
385 | -webkit-transform: scale3d(1, 1, 1);
386 | transform: scale3d(1, 1, 1);
387 | }
388 | }
389 |
390 | .tada {
391 | -webkit-animation-name: tada;
392 | animation-name: tada;
393 | }
394 |
395 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
396 |
397 | @-webkit-keyframes wobble {
398 | 0% {
399 | -webkit-transform: none;
400 | transform: none;
401 | }
402 |
403 | 15% {
404 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
405 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
406 | }
407 |
408 | 30% {
409 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
410 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
411 | }
412 |
413 | 45% {
414 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
415 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
416 | }
417 |
418 | 60% {
419 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
420 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
421 | }
422 |
423 | 75% {
424 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
425 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
426 | }
427 |
428 | 100% {
429 | -webkit-transform: none;
430 | transform: none;
431 | }
432 | }
433 |
434 | @keyframes wobble {
435 | 0% {
436 | -webkit-transform: none;
437 | transform: none;
438 | }
439 |
440 | 15% {
441 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
442 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
443 | }
444 |
445 | 30% {
446 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
447 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
448 | }
449 |
450 | 45% {
451 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
452 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
453 | }
454 |
455 | 60% {
456 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
457 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
458 | }
459 |
460 | 75% {
461 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
462 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
463 | }
464 |
465 | 100% {
466 | -webkit-transform: none;
467 | transform: none;
468 | }
469 | }
470 |
471 | .wobble {
472 | -webkit-animation-name: wobble;
473 | animation-name: wobble;
474 | }
475 |
476 | @-webkit-keyframes bounceIn {
477 | 0%, 20%, 40%, 60%, 80%, 100% {
478 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
479 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
480 | }
481 |
482 | 0% {
483 | opacity: 0;
484 | -webkit-transform: scale3d(.3, .3, .3);
485 | transform: scale3d(.3, .3, .3);
486 | }
487 |
488 | 20% {
489 | -webkit-transform: scale3d(1.1, 1.1, 1.1);
490 | transform: scale3d(1.1, 1.1, 1.1);
491 | }
492 |
493 | 40% {
494 | -webkit-transform: scale3d(.9, .9, .9);
495 | transform: scale3d(.9, .9, .9);
496 | }
497 |
498 | 60% {
499 | opacity: 1;
500 | -webkit-transform: scale3d(1.03, 1.03, 1.03);
501 | transform: scale3d(1.03, 1.03, 1.03);
502 | }
503 |
504 | 80% {
505 | -webkit-transform: scale3d(.97, .97, .97);
506 | transform: scale3d(.97, .97, .97);
507 | }
508 |
509 | 100% {
510 | opacity: 1;
511 | -webkit-transform: scale3d(1, 1, 1);
512 | transform: scale3d(1, 1, 1);
513 | }
514 | }
515 |
516 | @keyframes bounceIn {
517 | 0%, 20%, 40%, 60%, 80%, 100% {
518 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
519 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
520 | }
521 |
522 | 0% {
523 | opacity: 0;
524 | -webkit-transform: scale3d(.3, .3, .3);
525 | transform: scale3d(.3, .3, .3);
526 | }
527 |
528 | 20% {
529 | -webkit-transform: scale3d(1.1, 1.1, 1.1);
530 | transform: scale3d(1.1, 1.1, 1.1);
531 | }
532 |
533 | 40% {
534 | -webkit-transform: scale3d(.9, .9, .9);
535 | transform: scale3d(.9, .9, .9);
536 | }
537 |
538 | 60% {
539 | opacity: 1;
540 | -webkit-transform: scale3d(1.03, 1.03, 1.03);
541 | transform: scale3d(1.03, 1.03, 1.03);
542 | }
543 |
544 | 80% {
545 | -webkit-transform: scale3d(.97, .97, .97);
546 | transform: scale3d(.97, .97, .97);
547 | }
548 |
549 | 100% {
550 | opacity: 1;
551 | -webkit-transform: scale3d(1, 1, 1);
552 | transform: scale3d(1, 1, 1);
553 | }
554 | }
555 |
556 | .bounceIn {
557 | -webkit-animation-name: bounceIn;
558 | animation-name: bounceIn;
559 | -webkit-animation-duration: .75s;
560 | animation-duration: .75s;
561 | }
562 |
563 | @-webkit-keyframes bounceInDown {
564 | 0%, 60%, 75%, 90%, 100% {
565 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
566 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
567 | }
568 |
569 | 0% {
570 | opacity: 0;
571 | -webkit-transform: translate3d(0, -3000px, 0);
572 | transform: translate3d(0, -3000px, 0);
573 | }
574 |
575 | 60% {
576 | opacity: 1;
577 | -webkit-transform: translate3d(0, 25px, 0);
578 | transform: translate3d(0, 25px, 0);
579 | }
580 |
581 | 75% {
582 | -webkit-transform: translate3d(0, -10px, 0);
583 | transform: translate3d(0, -10px, 0);
584 | }
585 |
586 | 90% {
587 | -webkit-transform: translate3d(0, 5px, 0);
588 | transform: translate3d(0, 5px, 0);
589 | }
590 |
591 | 100% {
592 | -webkit-transform: none;
593 | transform: none;
594 | }
595 | }
596 |
597 | @keyframes bounceInDown {
598 | 0%, 60%, 75%, 90%, 100% {
599 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
600 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
601 | }
602 |
603 | 0% {
604 | opacity: 0;
605 | -webkit-transform: translate3d(0, -3000px, 0);
606 | transform: translate3d(0, -3000px, 0);
607 | }
608 |
609 | 60% {
610 | opacity: 1;
611 | -webkit-transform: translate3d(0, 25px, 0);
612 | transform: translate3d(0, 25px, 0);
613 | }
614 |
615 | 75% {
616 | -webkit-transform: translate3d(0, -10px, 0);
617 | transform: translate3d(0, -10px, 0);
618 | }
619 |
620 | 90% {
621 | -webkit-transform: translate3d(0, 5px, 0);
622 | transform: translate3d(0, 5px, 0);
623 | }
624 |
625 | 100% {
626 | -webkit-transform: none;
627 | transform: none;
628 | }
629 | }
630 |
631 | .bounceInDown {
632 | -webkit-animation-name: bounceInDown;
633 | animation-name: bounceInDown;
634 | }
635 |
636 | @-webkit-keyframes bounceInLeft {
637 | 0%, 60%, 75%, 90%, 100% {
638 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
639 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
640 | }
641 |
642 | 0% {
643 | opacity: 0;
644 | -webkit-transform: translate3d(-3000px, 0, 0);
645 | transform: translate3d(-3000px, 0, 0);
646 | }
647 |
648 | 60% {
649 | opacity: 1;
650 | -webkit-transform: translate3d(25px, 0, 0);
651 | transform: translate3d(25px, 0, 0);
652 | }
653 |
654 | 75% {
655 | -webkit-transform: translate3d(-10px, 0, 0);
656 | transform: translate3d(-10px, 0, 0);
657 | }
658 |
659 | 90% {
660 | -webkit-transform: translate3d(5px, 0, 0);
661 | transform: translate3d(5px, 0, 0);
662 | }
663 |
664 | 100% {
665 | -webkit-transform: none;
666 | transform: none;
667 | }
668 | }
669 |
670 | @keyframes bounceInLeft {
671 | 0%, 60%, 75%, 90%, 100% {
672 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
673 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
674 | }
675 |
676 | 0% {
677 | opacity: 0;
678 | -webkit-transform: translate3d(-3000px, 0, 0);
679 | transform: translate3d(-3000px, 0, 0);
680 | }
681 |
682 | 60% {
683 | opacity: 1;
684 | -webkit-transform: translate3d(25px, 0, 0);
685 | transform: translate3d(25px, 0, 0);
686 | }
687 |
688 | 75% {
689 | -webkit-transform: translate3d(-10px, 0, 0);
690 | transform: translate3d(-10px, 0, 0);
691 | }
692 |
693 | 90% {
694 | -webkit-transform: translate3d(5px, 0, 0);
695 | transform: translate3d(5px, 0, 0);
696 | }
697 |
698 | 100% {
699 | -webkit-transform: none;
700 | transform: none;
701 | }
702 | }
703 |
704 | .bounceInLeft {
705 | -webkit-animation-name: bounceInLeft;
706 | animation-name: bounceInLeft;
707 | }
708 |
709 | @-webkit-keyframes bounceInRight {
710 | 0%, 60%, 75%, 90%, 100% {
711 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
712 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
713 | }
714 |
715 | 0% {
716 | opacity: 0;
717 | -webkit-transform: translate3d(3000px, 0, 0);
718 | transform: translate3d(3000px, 0, 0);
719 | }
720 |
721 | 60% {
722 | opacity: 1;
723 | -webkit-transform: translate3d(-25px, 0, 0);
724 | transform: translate3d(-25px, 0, 0);
725 | }
726 |
727 | 75% {
728 | -webkit-transform: translate3d(10px, 0, 0);
729 | transform: translate3d(10px, 0, 0);
730 | }
731 |
732 | 90% {
733 | -webkit-transform: translate3d(-5px, 0, 0);
734 | transform: translate3d(-5px, 0, 0);
735 | }
736 |
737 | 100% {
738 | -webkit-transform: none;
739 | transform: none;
740 | }
741 | }
742 |
743 | @keyframes bounceInRight {
744 | 0%, 60%, 75%, 90%, 100% {
745 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
746 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
747 | }
748 |
749 | 0% {
750 | opacity: 0;
751 | -webkit-transform: translate3d(3000px, 0, 0);
752 | transform: translate3d(3000px, 0, 0);
753 | }
754 |
755 | 60% {
756 | opacity: 1;
757 | -webkit-transform: translate3d(-25px, 0, 0);
758 | transform: translate3d(-25px, 0, 0);
759 | }
760 |
761 | 75% {
762 | -webkit-transform: translate3d(10px, 0, 0);
763 | transform: translate3d(10px, 0, 0);
764 | }
765 |
766 | 90% {
767 | -webkit-transform: translate3d(-5px, 0, 0);
768 | transform: translate3d(-5px, 0, 0);
769 | }
770 |
771 | 100% {
772 | -webkit-transform: none;
773 | transform: none;
774 | }
775 | }
776 |
777 | .bounceInRight {
778 | -webkit-animation-name: bounceInRight;
779 | animation-name: bounceInRight;
780 | }
781 |
782 | @-webkit-keyframes bounceInUp {
783 | 0%, 60%, 75%, 90%, 100% {
784 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
785 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
786 | }
787 |
788 | 0% {
789 | opacity: 0;
790 | -webkit-transform: translate3d(0, 3000px, 0);
791 | transform: translate3d(0, 3000px, 0);
792 | }
793 |
794 | 60% {
795 | opacity: 1;
796 | -webkit-transform: translate3d(0, -20px, 0);
797 | transform: translate3d(0, -20px, 0);
798 | }
799 |
800 | 75% {
801 | -webkit-transform: translate3d(0, 10px, 0);
802 | transform: translate3d(0, 10px, 0);
803 | }
804 |
805 | 90% {
806 | -webkit-transform: translate3d(0, -5px, 0);
807 | transform: translate3d(0, -5px, 0);
808 | }
809 |
810 | 100% {
811 | -webkit-transform: translate3d(0, 0, 0);
812 | transform: translate3d(0, 0, 0);
813 | }
814 | }
815 |
816 | @keyframes bounceInUp {
817 | 0%, 60%, 75%, 90%, 100% {
818 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
819 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
820 | }
821 |
822 | 0% {
823 | opacity: 0;
824 | -webkit-transform: translate3d(0, 3000px, 0);
825 | transform: translate3d(0, 3000px, 0);
826 | }
827 |
828 | 60% {
829 | opacity: 1;
830 | -webkit-transform: translate3d(0, -20px, 0);
831 | transform: translate3d(0, -20px, 0);
832 | }
833 |
834 | 75% {
835 | -webkit-transform: translate3d(0, 10px, 0);
836 | transform: translate3d(0, 10px, 0);
837 | }
838 |
839 | 90% {
840 | -webkit-transform: translate3d(0, -5px, 0);
841 | transform: translate3d(0, -5px, 0);
842 | }
843 |
844 | 100% {
845 | -webkit-transform: translate3d(0, 0, 0);
846 | transform: translate3d(0, 0, 0);
847 | }
848 | }
849 |
850 | .bounceInUp {
851 | -webkit-animation-name: bounceInUp;
852 | animation-name: bounceInUp;
853 | }
854 |
855 | @-webkit-keyframes bounceOut {
856 | 20% {
857 | -webkit-transform: scale3d(.9, .9, .9);
858 | transform: scale3d(.9, .9, .9);
859 | }
860 |
861 | 50%, 55% {
862 | opacity: 1;
863 | -webkit-transform: scale3d(1.1, 1.1, 1.1);
864 | transform: scale3d(1.1, 1.1, 1.1);
865 | }
866 |
867 | 100% {
868 | opacity: 0;
869 | -webkit-transform: scale3d(.3, .3, .3);
870 | transform: scale3d(.3, .3, .3);
871 | }
872 | }
873 |
874 | @keyframes bounceOut {
875 | 20% {
876 | -webkit-transform: scale3d(.9, .9, .9);
877 | transform: scale3d(.9, .9, .9);
878 | }
879 |
880 | 50%, 55% {
881 | opacity: 1;
882 | -webkit-transform: scale3d(1.1, 1.1, 1.1);
883 | transform: scale3d(1.1, 1.1, 1.1);
884 | }
885 |
886 | 100% {
887 | opacity: 0;
888 | -webkit-transform: scale3d(.3, .3, .3);
889 | transform: scale3d(.3, .3, .3);
890 | }
891 | }
892 |
893 | .bounceOut {
894 | -webkit-animation-name: bounceOut;
895 | animation-name: bounceOut;
896 | -webkit-animation-duration: .75s;
897 | animation-duration: .75s;
898 | }
899 |
900 | @-webkit-keyframes bounceOutDown {
901 | 20% {
902 | -webkit-transform: translate3d(0, 10px, 0);
903 | transform: translate3d(0, 10px, 0);
904 | }
905 |
906 | 40%, 45% {
907 | opacity: 1;
908 | -webkit-transform: translate3d(0, -20px, 0);
909 | transform: translate3d(0, -20px, 0);
910 | }
911 |
912 | 100% {
913 | opacity: 0;
914 | -webkit-transform: translate3d(0, 2000px, 0);
915 | transform: translate3d(0, 2000px, 0);
916 | }
917 | }
918 |
919 | @keyframes bounceOutDown {
920 | 20% {
921 | -webkit-transform: translate3d(0, 10px, 0);
922 | transform: translate3d(0, 10px, 0);
923 | }
924 |
925 | 40%, 45% {
926 | opacity: 1;
927 | -webkit-transform: translate3d(0, -20px, 0);
928 | transform: translate3d(0, -20px, 0);
929 | }
930 |
931 | 100% {
932 | opacity: 0;
933 | -webkit-transform: translate3d(0, 2000px, 0);
934 | transform: translate3d(0, 2000px, 0);
935 | }
936 | }
937 |
938 | .bounceOutDown {
939 | -webkit-animation-name: bounceOutDown;
940 | animation-name: bounceOutDown;
941 | }
942 |
943 | @-webkit-keyframes bounceOutLeft {
944 | 20% {
945 | opacity: 1;
946 | -webkit-transform: translate3d(20px, 0, 0);
947 | transform: translate3d(20px, 0, 0);
948 | }
949 |
950 | 100% {
951 | opacity: 0;
952 | -webkit-transform: translate3d(-2000px, 0, 0);
953 | transform: translate3d(-2000px, 0, 0);
954 | }
955 | }
956 |
957 | @keyframes bounceOutLeft {
958 | 20% {
959 | opacity: 1;
960 | -webkit-transform: translate3d(20px, 0, 0);
961 | transform: translate3d(20px, 0, 0);
962 | }
963 |
964 | 100% {
965 | opacity: 0;
966 | -webkit-transform: translate3d(-2000px, 0, 0);
967 | transform: translate3d(-2000px, 0, 0);
968 | }
969 | }
970 |
971 | .bounceOutLeft {
972 | -webkit-animation-name: bounceOutLeft;
973 | animation-name: bounceOutLeft;
974 | }
975 |
976 | @-webkit-keyframes bounceOutRight {
977 | 20% {
978 | opacity: 1;
979 | -webkit-transform: translate3d(-20px, 0, 0);
980 | transform: translate3d(-20px, 0, 0);
981 | }
982 |
983 | 100% {
984 | opacity: 0;
985 | -webkit-transform: translate3d(2000px, 0, 0);
986 | transform: translate3d(2000px, 0, 0);
987 | }
988 | }
989 |
990 | @keyframes bounceOutRight {
991 | 20% {
992 | opacity: 1;
993 | -webkit-transform: translate3d(-20px, 0, 0);
994 | transform: translate3d(-20px, 0, 0);
995 | }
996 |
997 | 100% {
998 | opacity: 0;
999 | -webkit-transform: translate3d(2000px, 0, 0);
1000 | transform: translate3d(2000px, 0, 0);
1001 | }
1002 | }
1003 |
1004 | .bounceOutRight {
1005 | -webkit-animation-name: bounceOutRight;
1006 | animation-name: bounceOutRight;
1007 | }
1008 |
1009 | @-webkit-keyframes bounceOutUp {
1010 | 20% {
1011 | -webkit-transform: translate3d(0, -10px, 0);
1012 | transform: translate3d(0, -10px, 0);
1013 | }
1014 |
1015 | 40%, 45% {
1016 | opacity: 1;
1017 | -webkit-transform: translate3d(0, 20px, 0);
1018 | transform: translate3d(0, 20px, 0);
1019 | }
1020 |
1021 | 100% {
1022 | opacity: 0;
1023 | -webkit-transform: translate3d(0, -2000px, 0);
1024 | transform: translate3d(0, -2000px, 0);
1025 | }
1026 | }
1027 |
1028 | @keyframes bounceOutUp {
1029 | 20% {
1030 | -webkit-transform: translate3d(0, -10px, 0);
1031 | transform: translate3d(0, -10px, 0);
1032 | }
1033 |
1034 | 40%, 45% {
1035 | opacity: 1;
1036 | -webkit-transform: translate3d(0, 20px, 0);
1037 | transform: translate3d(0, 20px, 0);
1038 | }
1039 |
1040 | 100% {
1041 | opacity: 0;
1042 | -webkit-transform: translate3d(0, -2000px, 0);
1043 | transform: translate3d(0, -2000px, 0);
1044 | }
1045 | }
1046 |
1047 | .bounceOutUp {
1048 | -webkit-animation-name: bounceOutUp;
1049 | animation-name: bounceOutUp;
1050 | }
1051 |
1052 | @-webkit-keyframes fadeIn {
1053 | 0% {opacity: 0;}
1054 | 100% {opacity: 1;}
1055 | }
1056 |
1057 | @keyframes fadeIn {
1058 | 0% {opacity: 0;}
1059 | 100% {opacity: 1;}
1060 | }
1061 |
1062 | .fadeIn {
1063 | -webkit-animation-name: fadeIn;
1064 | animation-name: fadeIn;
1065 | }
1066 |
1067 | @-webkit-keyframes fadeInDown {
1068 | 0% {
1069 | opacity: 0;
1070 | -webkit-transform: translate3d(0, -100%, 0);
1071 | transform: translate3d(0, -100%, 0);
1072 | }
1073 |
1074 | 100% {
1075 | opacity: 1;
1076 | -webkit-transform: none;
1077 | transform: none;
1078 | }
1079 | }
1080 |
1081 | @keyframes fadeInDown {
1082 | 0% {
1083 | opacity: 0;
1084 | -webkit-transform: translate3d(0, -100%, 0);
1085 | transform: translate3d(0, -100%, 0);
1086 | }
1087 |
1088 | 100% {
1089 | opacity: 1;
1090 | -webkit-transform: none;
1091 | transform: none;
1092 | }
1093 | }
1094 |
1095 | .fadeInDown {
1096 | -webkit-animation-name: fadeInDown;
1097 | animation-name: fadeInDown;
1098 | }
1099 |
1100 | @-webkit-keyframes fadeInDownBig {
1101 | 0% {
1102 | opacity: 0;
1103 | -webkit-transform: translate3d(0, -2000px, 0);
1104 | transform: translate3d(0, -2000px, 0);
1105 | }
1106 |
1107 | 100% {
1108 | opacity: 1;
1109 | -webkit-transform: none;
1110 | transform: none;
1111 | }
1112 | }
1113 |
1114 | @keyframes fadeInDownBig {
1115 | 0% {
1116 | opacity: 0;
1117 | -webkit-transform: translate3d(0, -2000px, 0);
1118 | transform: translate3d(0, -2000px, 0);
1119 | }
1120 |
1121 | 100% {
1122 | opacity: 1;
1123 | -webkit-transform: none;
1124 | transform: none;
1125 | }
1126 | }
1127 |
1128 | .fadeInDownBig {
1129 | -webkit-animation-name: fadeInDownBig;
1130 | animation-name: fadeInDownBig;
1131 | }
1132 |
1133 | @-webkit-keyframes fadeInLeft {
1134 | 0% {
1135 | opacity: 0;
1136 | -webkit-transform: translate3d(-100%, 0, 0);
1137 | transform: translate3d(-100%, 0, 0);
1138 | }
1139 |
1140 | 100% {
1141 | opacity: 1;
1142 | -webkit-transform: none;
1143 | transform: none;
1144 | }
1145 | }
1146 |
1147 | @keyframes fadeInLeft {
1148 | 0% {
1149 | opacity: 0;
1150 | -webkit-transform: translate3d(-100%, 0, 0);
1151 | transform: translate3d(-100%, 0, 0);
1152 | }
1153 |
1154 | 100% {
1155 | opacity: 1;
1156 | -webkit-transform: none;
1157 | transform: none;
1158 | }
1159 | }
1160 |
1161 | .fadeInLeft {
1162 | -webkit-animation-name: fadeInLeft;
1163 | animation-name: fadeInLeft;
1164 | }
1165 |
1166 | @-webkit-keyframes fadeInLeftBig {
1167 | 0% {
1168 | opacity: 0;
1169 | -webkit-transform: translate3d(-2000px, 0, 0);
1170 | transform: translate3d(-2000px, 0, 0);
1171 | }
1172 |
1173 | 100% {
1174 | opacity: 1;
1175 | -webkit-transform: none;
1176 | transform: none;
1177 | }
1178 | }
1179 |
1180 | @keyframes fadeInLeftBig {
1181 | 0% {
1182 | opacity: 0;
1183 | -webkit-transform: translate3d(-2000px, 0, 0);
1184 | transform: translate3d(-2000px, 0, 0);
1185 | }
1186 |
1187 | 100% {
1188 | opacity: 1;
1189 | -webkit-transform: none;
1190 | transform: none;
1191 | }
1192 | }
1193 |
1194 | .fadeInLeftBig {
1195 | -webkit-animation-name: fadeInLeftBig;
1196 | animation-name: fadeInLeftBig;
1197 | }
1198 |
1199 | @-webkit-keyframes fadeInRight {
1200 | 0% {
1201 | opacity: 0;
1202 | -webkit-transform: translate3d(100%, 0, 0);
1203 | transform: translate3d(100%, 0, 0);
1204 | }
1205 |
1206 | 100% {
1207 | opacity: 1;
1208 | -webkit-transform: none;
1209 | transform: none;
1210 | }
1211 | }
1212 |
1213 | @keyframes fadeInRight {
1214 | 0% {
1215 | opacity: 0;
1216 | -webkit-transform: translate3d(100%, 0, 0);
1217 | transform: translate3d(100%, 0, 0);
1218 | }
1219 |
1220 | 100% {
1221 | opacity: 1;
1222 | -webkit-transform: none;
1223 | transform: none;
1224 | }
1225 | }
1226 |
1227 | .fadeInRight {
1228 | -webkit-animation-name: fadeInRight;
1229 | animation-name: fadeInRight;
1230 | }
1231 |
1232 | @-webkit-keyframes fadeInRightBig {
1233 | 0% {
1234 | opacity: 0;
1235 | -webkit-transform: translate3d(2000px, 0, 0);
1236 | transform: translate3d(2000px, 0, 0);
1237 | }
1238 |
1239 | 100% {
1240 | opacity: 1;
1241 | -webkit-transform: none;
1242 | transform: none;
1243 | }
1244 | }
1245 |
1246 | @keyframes fadeInRightBig {
1247 | 0% {
1248 | opacity: 0;
1249 | -webkit-transform: translate3d(2000px, 0, 0);
1250 | transform: translate3d(2000px, 0, 0);
1251 | }
1252 |
1253 | 100% {
1254 | opacity: 1;
1255 | -webkit-transform: none;
1256 | transform: none;
1257 | }
1258 | }
1259 |
1260 | .fadeInRightBig {
1261 | -webkit-animation-name: fadeInRightBig;
1262 | animation-name: fadeInRightBig;
1263 | }
1264 |
1265 | @-webkit-keyframes fadeInUp {
1266 | 0% {
1267 | opacity: 0;
1268 | -webkit-transform: translate3d(0, 100%, 0);
1269 | transform: translate3d(0, 100%, 0);
1270 | }
1271 |
1272 | 100% {
1273 | opacity: 1;
1274 | -webkit-transform: none;
1275 | transform: none;
1276 | }
1277 | }
1278 |
1279 | @keyframes fadeInUp {
1280 | 0% {
1281 | opacity: 0;
1282 | -webkit-transform: translate3d(0, 100%, 0);
1283 | transform: translate3d(0, 100%, 0);
1284 | }
1285 |
1286 | 100% {
1287 | opacity: 1;
1288 | -webkit-transform: none;
1289 | transform: none;
1290 | }
1291 | }
1292 |
1293 | .fadeInUp {
1294 | -webkit-animation-name: fadeInUp;
1295 | animation-name: fadeInUp;
1296 | }
1297 |
1298 | @-webkit-keyframes fadeInUpBig {
1299 | 0% {
1300 | opacity: 0;
1301 | -webkit-transform: translate3d(0, 2000px, 0);
1302 | transform: translate3d(0, 2000px, 0);
1303 | }
1304 |
1305 | 100% {
1306 | opacity: 1;
1307 | -webkit-transform: none;
1308 | transform: none;
1309 | }
1310 | }
1311 |
1312 | @keyframes fadeInUpBig {
1313 | 0% {
1314 | opacity: 0;
1315 | -webkit-transform: translate3d(0, 2000px, 0);
1316 | transform: translate3d(0, 2000px, 0);
1317 | }
1318 |
1319 | 100% {
1320 | opacity: 1;
1321 | -webkit-transform: none;
1322 | transform: none;
1323 | }
1324 | }
1325 |
1326 | .fadeInUpBig {
1327 | -webkit-animation-name: fadeInUpBig;
1328 | animation-name: fadeInUpBig;
1329 | }
1330 |
1331 | @-webkit-keyframes fadeOut {
1332 | 0% {opacity: 1;}
1333 | 100% {opacity: 0;}
1334 | }
1335 |
1336 | @keyframes fadeOut {
1337 | 0% {opacity: 1;}
1338 | 100% {opacity: 0;}
1339 | }
1340 |
1341 | .fadeOut {
1342 | -webkit-animation-name: fadeOut;
1343 | animation-name: fadeOut;
1344 | }
1345 |
1346 | @-webkit-keyframes fadeOutDown {
1347 | 0% {
1348 | opacity: 1;
1349 | }
1350 |
1351 | 100% {
1352 | opacity: 0;
1353 | -webkit-transform: translate3d(0, 100%, 0);
1354 | transform: translate3d(0, 100%, 0);
1355 | }
1356 | }
1357 |
1358 | @keyframes fadeOutDown {
1359 | 0% {
1360 | opacity: 1;
1361 | }
1362 |
1363 | 100% {
1364 | opacity: 0;
1365 | -webkit-transform: translate3d(0, 100%, 0);
1366 | transform: translate3d(0, 100%, 0);
1367 | }
1368 | }
1369 |
1370 | .fadeOutDown {
1371 | -webkit-animation-name: fadeOutDown;
1372 | animation-name: fadeOutDown;
1373 | }
1374 |
1375 | @-webkit-keyframes fadeOutDownBig {
1376 | 0% {
1377 | opacity: 1;
1378 | }
1379 |
1380 | 100% {
1381 | opacity: 0;
1382 | -webkit-transform: translate3d(0, 2000px, 0);
1383 | transform: translate3d(0, 2000px, 0);
1384 | }
1385 | }
1386 |
1387 | @keyframes fadeOutDownBig {
1388 | 0% {
1389 | opacity: 1;
1390 | }
1391 |
1392 | 100% {
1393 | opacity: 0;
1394 | -webkit-transform: translate3d(0, 2000px, 0);
1395 | transform: translate3d(0, 2000px, 0);
1396 | }
1397 | }
1398 |
1399 | .fadeOutDownBig {
1400 | -webkit-animation-name: fadeOutDownBig;
1401 | animation-name: fadeOutDownBig;
1402 | }
1403 |
1404 | @-webkit-keyframes fadeOutLeft {
1405 | 0% {
1406 | opacity: 1;
1407 | }
1408 |
1409 | 100% {
1410 | opacity: 0;
1411 | -webkit-transform: translate3d(-100%, 0, 0);
1412 | transform: translate3d(-100%, 0, 0);
1413 | }
1414 | }
1415 |
1416 | @keyframes fadeOutLeft {
1417 | 0% {
1418 | opacity: 1;
1419 | }
1420 |
1421 | 100% {
1422 | opacity: 0;
1423 | -webkit-transform: translate3d(-100%, 0, 0);
1424 | transform: translate3d(-100%, 0, 0);
1425 | }
1426 | }
1427 |
1428 | .fadeOutLeft {
1429 | -webkit-animation-name: fadeOutLeft;
1430 | animation-name: fadeOutLeft;
1431 | }
1432 |
1433 | @-webkit-keyframes fadeOutLeftBig {
1434 | 0% {
1435 | opacity: 1;
1436 | }
1437 |
1438 | 100% {
1439 | opacity: 0;
1440 | -webkit-transform: translate3d(-2000px, 0, 0);
1441 | transform: translate3d(-2000px, 0, 0);
1442 | }
1443 | }
1444 |
1445 | @keyframes fadeOutLeftBig {
1446 | 0% {
1447 | opacity: 1;
1448 | }
1449 |
1450 | 100% {
1451 | opacity: 0;
1452 | -webkit-transform: translate3d(-2000px, 0, 0);
1453 | transform: translate3d(-2000px, 0, 0);
1454 | }
1455 | }
1456 |
1457 | .fadeOutLeftBig {
1458 | -webkit-animation-name: fadeOutLeftBig;
1459 | animation-name: fadeOutLeftBig;
1460 | }
1461 |
1462 | @-webkit-keyframes fadeOutRight {
1463 | 0% {
1464 | opacity: 1;
1465 | }
1466 |
1467 | 100% {
1468 | opacity: 0;
1469 | -webkit-transform: translate3d(100%, 0, 0);
1470 | transform: translate3d(100%, 0, 0);
1471 | }
1472 | }
1473 |
1474 | @keyframes fadeOutRight {
1475 | 0% {
1476 | opacity: 1;
1477 | }
1478 |
1479 | 100% {
1480 | opacity: 0;
1481 | -webkit-transform: translate3d(100%, 0, 0);
1482 | transform: translate3d(100%, 0, 0);
1483 | }
1484 | }
1485 |
1486 | .fadeOutRight {
1487 | -webkit-animation-name: fadeOutRight;
1488 | animation-name: fadeOutRight;
1489 | }
1490 |
1491 | @-webkit-keyframes fadeOutRightBig {
1492 | 0% {
1493 | opacity: 1;
1494 | }
1495 |
1496 | 100% {
1497 | opacity: 0;
1498 | -webkit-transform: translate3d(2000px, 0, 0);
1499 | transform: translate3d(2000px, 0, 0);
1500 | }
1501 | }
1502 |
1503 | @keyframes fadeOutRightBig {
1504 | 0% {
1505 | opacity: 1;
1506 | }
1507 |
1508 | 100% {
1509 | opacity: 0;
1510 | -webkit-transform: translate3d(2000px, 0, 0);
1511 | transform: translate3d(2000px, 0, 0);
1512 | }
1513 | }
1514 |
1515 | .fadeOutRightBig {
1516 | -webkit-animation-name: fadeOutRightBig;
1517 | animation-name: fadeOutRightBig;
1518 | }
1519 |
1520 | @-webkit-keyframes fadeOutUp {
1521 | 0% {
1522 | opacity: 1;
1523 | }
1524 |
1525 | 100% {
1526 | opacity: 0;
1527 | -webkit-transform: translate3d(0, -100%, 0);
1528 | transform: translate3d(0, -100%, 0);
1529 | }
1530 | }
1531 |
1532 | @keyframes fadeOutUp {
1533 | 0% {
1534 | opacity: 1;
1535 | }
1536 |
1537 | 100% {
1538 | opacity: 0;
1539 | -webkit-transform: translate3d(0, -100%, 0);
1540 | transform: translate3d(0, -100%, 0);
1541 | }
1542 | }
1543 |
1544 | .fadeOutUp {
1545 | -webkit-animation-name: fadeOutUp;
1546 | animation-name: fadeOutUp;
1547 | }
1548 |
1549 | @-webkit-keyframes fadeOutUpBig {
1550 | 0% {
1551 | opacity: 1;
1552 | }
1553 |
1554 | 100% {
1555 | opacity: 0;
1556 | -webkit-transform: translate3d(0, -2000px, 0);
1557 | transform: translate3d(0, -2000px, 0);
1558 | }
1559 | }
1560 |
1561 | @keyframes fadeOutUpBig {
1562 | 0% {
1563 | opacity: 1;
1564 | }
1565 |
1566 | 100% {
1567 | opacity: 0;
1568 | -webkit-transform: translate3d(0, -2000px, 0);
1569 | transform: translate3d(0, -2000px, 0);
1570 | }
1571 | }
1572 |
1573 | .fadeOutUpBig {
1574 | -webkit-animation-name: fadeOutUpBig;
1575 | animation-name: fadeOutUpBig;
1576 | }
1577 |
1578 | @-webkit-keyframes flip {
1579 | 0% {
1580 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1581 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1582 | -webkit-animation-timing-function: ease-out;
1583 | animation-timing-function: ease-out;
1584 | }
1585 |
1586 | 40% {
1587 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1588 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1589 | -webkit-animation-timing-function: ease-out;
1590 | animation-timing-function: ease-out;
1591 | }
1592 |
1593 | 50% {
1594 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1595 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1596 | -webkit-animation-timing-function: ease-in;
1597 | animation-timing-function: ease-in;
1598 | }
1599 |
1600 | 80% {
1601 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1602 | transform: perspective(400px) scale3d(.95, .95, .95);
1603 | -webkit-animation-timing-function: ease-in;
1604 | animation-timing-function: ease-in;
1605 | }
1606 |
1607 | 100% {
1608 | -webkit-transform: perspective(400px);
1609 | transform: perspective(400px);
1610 | -webkit-animation-timing-function: ease-in;
1611 | animation-timing-function: ease-in;
1612 | }
1613 | }
1614 |
1615 | @keyframes flip {
1616 | 0% {
1617 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1618 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1619 | -webkit-animation-timing-function: ease-out;
1620 | animation-timing-function: ease-out;
1621 | }
1622 |
1623 | 40% {
1624 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1625 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1626 | -webkit-animation-timing-function: ease-out;
1627 | animation-timing-function: ease-out;
1628 | }
1629 |
1630 | 50% {
1631 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1632 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1633 | -webkit-animation-timing-function: ease-in;
1634 | animation-timing-function: ease-in;
1635 | }
1636 |
1637 | 80% {
1638 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1639 | transform: perspective(400px) scale3d(.95, .95, .95);
1640 | -webkit-animation-timing-function: ease-in;
1641 | animation-timing-function: ease-in;
1642 | }
1643 |
1644 | 100% {
1645 | -webkit-transform: perspective(400px);
1646 | transform: perspective(400px);
1647 | -webkit-animation-timing-function: ease-in;
1648 | animation-timing-function: ease-in;
1649 | }
1650 | }
1651 |
1652 | .animated.flip {
1653 | -webkit-backface-visibility: visible;
1654 | backface-visibility: visible;
1655 | -webkit-animation-name: flip;
1656 | animation-name: flip;
1657 | }
1658 |
1659 | @-webkit-keyframes flipInX {
1660 | 0% {
1661 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1662 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1663 | -webkit-transition-timing-function: ease-in;
1664 | transition-timing-function: ease-in;
1665 | opacity: 0;
1666 | }
1667 |
1668 | 40% {
1669 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1670 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1671 | -webkit-transition-timing-function: ease-in;
1672 | transition-timing-function: ease-in;
1673 | }
1674 |
1675 | 60% {
1676 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1677 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1678 | opacity: 1;
1679 | }
1680 |
1681 | 80% {
1682 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1683 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1684 | }
1685 |
1686 | 100% {
1687 | -webkit-transform: perspective(400px);
1688 | transform: perspective(400px);
1689 | }
1690 | }
1691 |
1692 | @keyframes flipInX {
1693 | 0% {
1694 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1695 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1696 | -webkit-transition-timing-function: ease-in;
1697 | transition-timing-function: ease-in;
1698 | opacity: 0;
1699 | }
1700 |
1701 | 40% {
1702 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1703 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1704 | -webkit-transition-timing-function: ease-in;
1705 | transition-timing-function: ease-in;
1706 | }
1707 |
1708 | 60% {
1709 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1710 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1711 | opacity: 1;
1712 | }
1713 |
1714 | 80% {
1715 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1716 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1717 | }
1718 |
1719 | 100% {
1720 | -webkit-transform: perspective(400px);
1721 | transform: perspective(400px);
1722 | }
1723 | }
1724 |
1725 | .flipInX {
1726 | -webkit-backface-visibility: visible !important;
1727 | backface-visibility: visible !important;
1728 | -webkit-animation-name: flipInX;
1729 | animation-name: flipInX;
1730 | }
1731 |
1732 | @-webkit-keyframes flipInY {
1733 | 0% {
1734 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1735 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1736 | -webkit-transition-timing-function: ease-in;
1737 | transition-timing-function: ease-in;
1738 | opacity: 0;
1739 | }
1740 |
1741 | 40% {
1742 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1743 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1744 | -webkit-transition-timing-function: ease-in;
1745 | transition-timing-function: ease-in;
1746 | }
1747 |
1748 | 60% {
1749 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1750 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1751 | opacity: 1;
1752 | }
1753 |
1754 | 80% {
1755 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1756 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1757 | }
1758 |
1759 | 100% {
1760 | -webkit-transform: perspective(400px);
1761 | transform: perspective(400px);
1762 | }
1763 | }
1764 |
1765 | @keyframes flipInY {
1766 | 0% {
1767 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1768 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1769 | -webkit-transition-timing-function: ease-in;
1770 | transition-timing-function: ease-in;
1771 | opacity: 0;
1772 | }
1773 |
1774 | 40% {
1775 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1776 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1777 | -webkit-transition-timing-function: ease-in;
1778 | transition-timing-function: ease-in;
1779 | }
1780 |
1781 | 60% {
1782 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1783 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1784 | opacity: 1;
1785 | }
1786 |
1787 | 80% {
1788 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1789 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1790 | }
1791 |
1792 | 100% {
1793 | -webkit-transform: perspective(400px);
1794 | transform: perspective(400px);
1795 | }
1796 | }
1797 |
1798 | .flipInY {
1799 | -webkit-backface-visibility: visible !important;
1800 | backface-visibility: visible !important;
1801 | -webkit-animation-name: flipInY;
1802 | animation-name: flipInY;
1803 | }
1804 |
1805 | @-webkit-keyframes flipOutX {
1806 | 0% {
1807 | -webkit-transform: perspective(400px);
1808 | transform: perspective(400px);
1809 | }
1810 |
1811 | 30% {
1812 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1813 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1814 | opacity: 1;
1815 | }
1816 |
1817 | 100% {
1818 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1819 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1820 | opacity: 0;
1821 | }
1822 | }
1823 |
1824 | @keyframes flipOutX {
1825 | 0% {
1826 | -webkit-transform: perspective(400px);
1827 | transform: perspective(400px);
1828 | }
1829 |
1830 | 30% {
1831 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1832 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1833 | opacity: 1;
1834 | }
1835 |
1836 | 100% {
1837 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1838 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1839 | opacity: 0;
1840 | }
1841 | }
1842 |
1843 | .flipOutX {
1844 | -webkit-animation-name: flipOutX;
1845 | animation-name: flipOutX;
1846 | -webkit-animation-duration: .75s;
1847 | animation-duration: .75s;
1848 | -webkit-backface-visibility: visible !important;
1849 | backface-visibility: visible !important;
1850 | }
1851 |
1852 | @-webkit-keyframes flipOutY {
1853 | 0% {
1854 | -webkit-transform: perspective(400px);
1855 | transform: perspective(400px);
1856 | }
1857 |
1858 | 30% {
1859 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1860 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1861 | opacity: 1;
1862 | }
1863 |
1864 | 100% {
1865 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1866 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1867 | opacity: 0;
1868 | }
1869 | }
1870 |
1871 | @keyframes flipOutY {
1872 | 0% {
1873 | -webkit-transform: perspective(400px);
1874 | transform: perspective(400px);
1875 | }
1876 |
1877 | 30% {
1878 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1879 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1880 | opacity: 1;
1881 | }
1882 |
1883 | 100% {
1884 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1885 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1886 | opacity: 0;
1887 | }
1888 | }
1889 |
1890 | .flipOutY {
1891 | -webkit-backface-visibility: visible !important;
1892 | backface-visibility: visible !important;
1893 | -webkit-animation-name: flipOutY;
1894 | animation-name: flipOutY;
1895 | -webkit-animation-duration: .75s;
1896 | animation-duration: .75s;
1897 | }
1898 |
1899 | @-webkit-keyframes lightSpeedIn {
1900 | 0% {
1901 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
1902 | transform: translate3d(100%, 0, 0) skewX(-30deg);
1903 | opacity: 0;
1904 | }
1905 |
1906 | 60% {
1907 | -webkit-transform: skewX(20deg);
1908 | transform: skewX(20deg);
1909 | opacity: 1;
1910 | }
1911 |
1912 | 80% {
1913 | -webkit-transform: skewX(-5deg);
1914 | transform: skewX(-5deg);
1915 | opacity: 1;
1916 | }
1917 |
1918 | 100% {
1919 | -webkit-transform: none;
1920 | transform: none;
1921 | opacity: 1;
1922 | }
1923 | }
1924 |
1925 | @keyframes lightSpeedIn {
1926 | 0% {
1927 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
1928 | transform: translate3d(100%, 0, 0) skewX(-30deg);
1929 | opacity: 0;
1930 | }
1931 |
1932 | 60% {
1933 | -webkit-transform: skewX(20deg);
1934 | transform: skewX(20deg);
1935 | opacity: 1;
1936 | }
1937 |
1938 | 80% {
1939 | -webkit-transform: skewX(-5deg);
1940 | transform: skewX(-5deg);
1941 | opacity: 1;
1942 | }
1943 |
1944 | 100% {
1945 | -webkit-transform: none;
1946 | transform: none;
1947 | opacity: 1;
1948 | }
1949 | }
1950 |
1951 | .lightSpeedIn {
1952 | -webkit-animation-name: lightSpeedIn;
1953 | animation-name: lightSpeedIn;
1954 | -webkit-animation-timing-function: ease-out;
1955 | animation-timing-function: ease-out;
1956 | }
1957 |
1958 | @-webkit-keyframes lightSpeedOut {
1959 | 0% {
1960 | opacity: 1;
1961 | }
1962 |
1963 | 100% {
1964 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
1965 | transform: translate3d(100%, 0, 0) skewX(30deg);
1966 | opacity: 0;
1967 | }
1968 | }
1969 |
1970 | @keyframes lightSpeedOut {
1971 | 0% {
1972 | opacity: 1;
1973 | }
1974 |
1975 | 100% {
1976 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
1977 | transform: translate3d(100%, 0, 0) skewX(30deg);
1978 | opacity: 0;
1979 | }
1980 | }
1981 |
1982 | .lightSpeedOut {
1983 | -webkit-animation-name: lightSpeedOut;
1984 | animation-name: lightSpeedOut;
1985 | -webkit-animation-timing-function: ease-in;
1986 | animation-timing-function: ease-in;
1987 | }
1988 |
1989 | @-webkit-keyframes rotateIn {
1990 | 0% {
1991 | -webkit-transform-origin: center;
1992 | transform-origin: center;
1993 | -webkit-transform: rotate3d(0, 0, 1, -200deg);
1994 | transform: rotate3d(0, 0, 1, -200deg);
1995 | opacity: 0;
1996 | }
1997 |
1998 | 100% {
1999 | -webkit-transform-origin: center;
2000 | transform-origin: center;
2001 | -webkit-transform: none;
2002 | transform: none;
2003 | opacity: 1;
2004 | }
2005 | }
2006 |
2007 | @keyframes rotateIn {
2008 | 0% {
2009 | -webkit-transform-origin: center;
2010 | transform-origin: center;
2011 | -webkit-transform: rotate3d(0, 0, 1, -200deg);
2012 | transform: rotate3d(0, 0, 1, -200deg);
2013 | opacity: 0;
2014 | }
2015 |
2016 | 100% {
2017 | -webkit-transform-origin: center;
2018 | transform-origin: center;
2019 | -webkit-transform: none;
2020 | transform: none;
2021 | opacity: 1;
2022 | }
2023 | }
2024 |
2025 | .rotateIn {
2026 | -webkit-animation-name: rotateIn;
2027 | animation-name: rotateIn;
2028 | }
2029 |
2030 | @-webkit-keyframes rotateInDownLeft {
2031 | 0% {
2032 | -webkit-transform-origin: left bottom;
2033 | transform-origin: left bottom;
2034 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2035 | transform: rotate3d(0, 0, 1, -45deg);
2036 | opacity: 0;
2037 | }
2038 |
2039 | 100% {
2040 | -webkit-transform-origin: left bottom;
2041 | transform-origin: left bottom;
2042 | -webkit-transform: none;
2043 | transform: none;
2044 | opacity: 1;
2045 | }
2046 | }
2047 |
2048 | @keyframes rotateInDownLeft {
2049 | 0% {
2050 | -webkit-transform-origin: left bottom;
2051 | transform-origin: left bottom;
2052 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2053 | transform: rotate3d(0, 0, 1, -45deg);
2054 | opacity: 0;
2055 | }
2056 |
2057 | 100% {
2058 | -webkit-transform-origin: left bottom;
2059 | transform-origin: left bottom;
2060 | -webkit-transform: none;
2061 | transform: none;
2062 | opacity: 1;
2063 | }
2064 | }
2065 |
2066 | .rotateInDownLeft {
2067 | -webkit-animation-name: rotateInDownLeft;
2068 | animation-name: rotateInDownLeft;
2069 | }
2070 |
2071 | @-webkit-keyframes rotateInDownRight {
2072 | 0% {
2073 | -webkit-transform-origin: right bottom;
2074 | transform-origin: right bottom;
2075 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2076 | transform: rotate3d(0, 0, 1, 45deg);
2077 | opacity: 0;
2078 | }
2079 |
2080 | 100% {
2081 | -webkit-transform-origin: right bottom;
2082 | transform-origin: right bottom;
2083 | -webkit-transform: none;
2084 | transform: none;
2085 | opacity: 1;
2086 | }
2087 | }
2088 |
2089 | @keyframes rotateInDownRight {
2090 | 0% {
2091 | -webkit-transform-origin: right bottom;
2092 | transform-origin: right bottom;
2093 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2094 | transform: rotate3d(0, 0, 1, 45deg);
2095 | opacity: 0;
2096 | }
2097 |
2098 | 100% {
2099 | -webkit-transform-origin: right bottom;
2100 | transform-origin: right bottom;
2101 | -webkit-transform: none;
2102 | transform: none;
2103 | opacity: 1;
2104 | }
2105 | }
2106 |
2107 | .rotateInDownRight {
2108 | -webkit-animation-name: rotateInDownRight;
2109 | animation-name: rotateInDownRight;
2110 | }
2111 |
2112 | @-webkit-keyframes rotateInUpLeft {
2113 | 0% {
2114 | -webkit-transform-origin: left bottom;
2115 | transform-origin: left bottom;
2116 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2117 | transform: rotate3d(0, 0, 1, 45deg);
2118 | opacity: 0;
2119 | }
2120 |
2121 | 100% {
2122 | -webkit-transform-origin: left bottom;
2123 | transform-origin: left bottom;
2124 | -webkit-transform: none;
2125 | transform: none;
2126 | opacity: 1;
2127 | }
2128 | }
2129 |
2130 | @keyframes rotateInUpLeft {
2131 | 0% {
2132 | -webkit-transform-origin: left bottom;
2133 | transform-origin: left bottom;
2134 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2135 | transform: rotate3d(0, 0, 1, 45deg);
2136 | opacity: 0;
2137 | }
2138 |
2139 | 100% {
2140 | -webkit-transform-origin: left bottom;
2141 | transform-origin: left bottom;
2142 | -webkit-transform: none;
2143 | transform: none;
2144 | opacity: 1;
2145 | }
2146 | }
2147 |
2148 | .rotateInUpLeft {
2149 | -webkit-animation-name: rotateInUpLeft;
2150 | animation-name: rotateInUpLeft;
2151 | }
2152 |
2153 | @-webkit-keyframes rotateInUpRight {
2154 | 0% {
2155 | -webkit-transform-origin: right bottom;
2156 | transform-origin: right bottom;
2157 | -webkit-transform: rotate3d(0, 0, 1, -90deg);
2158 | transform: rotate3d(0, 0, 1, -90deg);
2159 | opacity: 0;
2160 | }
2161 |
2162 | 100% {
2163 | -webkit-transform-origin: right bottom;
2164 | transform-origin: right bottom;
2165 | -webkit-transform: none;
2166 | transform: none;
2167 | opacity: 1;
2168 | }
2169 | }
2170 |
2171 | @keyframes rotateInUpRight {
2172 | 0% {
2173 | -webkit-transform-origin: right bottom;
2174 | transform-origin: right bottom;
2175 | -webkit-transform: rotate3d(0, 0, 1, -90deg);
2176 | transform: rotate3d(0, 0, 1, -90deg);
2177 | opacity: 0;
2178 | }
2179 |
2180 | 100% {
2181 | -webkit-transform-origin: right bottom;
2182 | transform-origin: right bottom;
2183 | -webkit-transform: none;
2184 | transform: none;
2185 | opacity: 1;
2186 | }
2187 | }
2188 |
2189 | .rotateInUpRight {
2190 | -webkit-animation-name: rotateInUpRight;
2191 | animation-name: rotateInUpRight;
2192 | }
2193 |
2194 | @-webkit-keyframes rotateOut {
2195 | 0% {
2196 | -webkit-transform-origin: center;
2197 | transform-origin: center;
2198 | opacity: 1;
2199 | }
2200 |
2201 | 100% {
2202 | -webkit-transform-origin: center;
2203 | transform-origin: center;
2204 | -webkit-transform: rotate3d(0, 0, 1, 200deg);
2205 | transform: rotate3d(0, 0, 1, 200deg);
2206 | opacity: 0;
2207 | }
2208 | }
2209 |
2210 | @keyframes rotateOut {
2211 | 0% {
2212 | -webkit-transform-origin: center;
2213 | transform-origin: center;
2214 | opacity: 1;
2215 | }
2216 |
2217 | 100% {
2218 | -webkit-transform-origin: center;
2219 | transform-origin: center;
2220 | -webkit-transform: rotate3d(0, 0, 1, 200deg);
2221 | transform: rotate3d(0, 0, 1, 200deg);
2222 | opacity: 0;
2223 | }
2224 | }
2225 |
2226 | .rotateOut {
2227 | -webkit-animation-name: rotateOut;
2228 | animation-name: rotateOut;
2229 | }
2230 |
2231 | @-webkit-keyframes rotateOutDownLeft {
2232 | 0% {
2233 | -webkit-transform-origin: left bottom;
2234 | transform-origin: left bottom;
2235 | opacity: 1;
2236 | }
2237 |
2238 | 100% {
2239 | -webkit-transform-origin: left bottom;
2240 | transform-origin: left bottom;
2241 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2242 | transform: rotate3d(0, 0, 1, 45deg);
2243 | opacity: 0;
2244 | }
2245 | }
2246 |
2247 | @keyframes rotateOutDownLeft {
2248 | 0% {
2249 | -webkit-transform-origin: left bottom;
2250 | transform-origin: left bottom;
2251 | opacity: 1;
2252 | }
2253 |
2254 | 100% {
2255 | -webkit-transform-origin: left bottom;
2256 | transform-origin: left bottom;
2257 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2258 | transform: rotate3d(0, 0, 1, 45deg);
2259 | opacity: 0;
2260 | }
2261 | }
2262 |
2263 | .rotateOutDownLeft {
2264 | -webkit-animation-name: rotateOutDownLeft;
2265 | animation-name: rotateOutDownLeft;
2266 | }
2267 |
2268 | @-webkit-keyframes rotateOutDownRight {
2269 | 0% {
2270 | -webkit-transform-origin: right bottom;
2271 | transform-origin: right bottom;
2272 | opacity: 1;
2273 | }
2274 |
2275 | 100% {
2276 | -webkit-transform-origin: right bottom;
2277 | transform-origin: right bottom;
2278 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2279 | transform: rotate3d(0, 0, 1, -45deg);
2280 | opacity: 0;
2281 | }
2282 | }
2283 |
2284 | @keyframes rotateOutDownRight {
2285 | 0% {
2286 | -webkit-transform-origin: right bottom;
2287 | transform-origin: right bottom;
2288 | opacity: 1;
2289 | }
2290 |
2291 | 100% {
2292 | -webkit-transform-origin: right bottom;
2293 | transform-origin: right bottom;
2294 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2295 | transform: rotate3d(0, 0, 1, -45deg);
2296 | opacity: 0;
2297 | }
2298 | }
2299 |
2300 | .rotateOutDownRight {
2301 | -webkit-animation-name: rotateOutDownRight;
2302 | animation-name: rotateOutDownRight;
2303 | }
2304 |
2305 | @-webkit-keyframes rotateOutUpLeft {
2306 | 0% {
2307 | -webkit-transform-origin: left bottom;
2308 | transform-origin: left bottom;
2309 | opacity: 1;
2310 | }
2311 |
2312 | 100% {
2313 | -webkit-transform-origin: left bottom;
2314 | transform-origin: left bottom;
2315 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2316 | transform: rotate3d(0, 0, 1, -45deg);
2317 | opacity: 0;
2318 | }
2319 | }
2320 |
2321 | @keyframes rotateOutUpLeft {
2322 | 0% {
2323 | -webkit-transform-origin: left bottom;
2324 | transform-origin: left bottom;
2325 | opacity: 1;
2326 | }
2327 |
2328 | 100% {
2329 | -webkit-transform-origin: left bottom;
2330 | transform-origin: left bottom;
2331 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2332 | transform: rotate3d(0, 0, 1, -45deg);
2333 | opacity: 0;
2334 | }
2335 | }
2336 |
2337 | .rotateOutUpLeft {
2338 | -webkit-animation-name: rotateOutUpLeft;
2339 | animation-name: rotateOutUpLeft;
2340 | }
2341 |
2342 | @-webkit-keyframes rotateOutUpRight {
2343 | 0% {
2344 | -webkit-transform-origin: right bottom;
2345 | transform-origin: right bottom;
2346 | opacity: 1;
2347 | }
2348 |
2349 | 100% {
2350 | -webkit-transform-origin: right bottom;
2351 | transform-origin: right bottom;
2352 | -webkit-transform: rotate3d(0, 0, 1, 90deg);
2353 | transform: rotate3d(0, 0, 1, 90deg);
2354 | opacity: 0;
2355 | }
2356 | }
2357 |
2358 | @keyframes rotateOutUpRight {
2359 | 0% {
2360 | -webkit-transform-origin: right bottom;
2361 | transform-origin: right bottom;
2362 | opacity: 1;
2363 | }
2364 |
2365 | 100% {
2366 | -webkit-transform-origin: right bottom;
2367 | transform-origin: right bottom;
2368 | -webkit-transform: rotate3d(0, 0, 1, 90deg);
2369 | transform: rotate3d(0, 0, 1, 90deg);
2370 | opacity: 0;
2371 | }
2372 | }
2373 |
2374 | .rotateOutUpRight {
2375 | -webkit-animation-name: rotateOutUpRight;
2376 | animation-name: rotateOutUpRight;
2377 | }
2378 |
2379 | @-webkit-keyframes hinge {
2380 | 0% {
2381 | -webkit-transform-origin: top left;
2382 | transform-origin: top left;
2383 | -webkit-animation-timing-function: ease-in-out;
2384 | animation-timing-function: ease-in-out;
2385 | }
2386 |
2387 | 20%, 60% {
2388 | -webkit-transform: rotate3d(0, 0, 1, 80deg);
2389 | transform: rotate3d(0, 0, 1, 80deg);
2390 | -webkit-transform-origin: top left;
2391 | transform-origin: top left;
2392 | -webkit-animation-timing-function: ease-in-out;
2393 | animation-timing-function: ease-in-out;
2394 | }
2395 |
2396 | 40%, 80% {
2397 | -webkit-transform: rotate3d(0, 0, 1, 60deg);
2398 | transform: rotate3d(0, 0, 1, 60deg);
2399 | -webkit-transform-origin: top left;
2400 | transform-origin: top left;
2401 | -webkit-animation-timing-function: ease-in-out;
2402 | animation-timing-function: ease-in-out;
2403 | opacity: 1;
2404 | }
2405 |
2406 | 100% {
2407 | -webkit-transform: translate3d(0, 700px, 0);
2408 | transform: translate3d(0, 700px, 0);
2409 | opacity: 0;
2410 | }
2411 | }
2412 |
2413 | @keyframes hinge {
2414 | 0% {
2415 | -webkit-transform-origin: top left;
2416 | transform-origin: top left;
2417 | -webkit-animation-timing-function: ease-in-out;
2418 | animation-timing-function: ease-in-out;
2419 | }
2420 |
2421 | 20%, 60% {
2422 | -webkit-transform: rotate3d(0, 0, 1, 80deg);
2423 | transform: rotate3d(0, 0, 1, 80deg);
2424 | -webkit-transform-origin: top left;
2425 | transform-origin: top left;
2426 | -webkit-animation-timing-function: ease-in-out;
2427 | animation-timing-function: ease-in-out;
2428 | }
2429 |
2430 | 40%, 80% {
2431 | -webkit-transform: rotate3d(0, 0, 1, 60deg);
2432 | transform: rotate3d(0, 0, 1, 60deg);
2433 | -webkit-transform-origin: top left;
2434 | transform-origin: top left;
2435 | -webkit-animation-timing-function: ease-in-out;
2436 | animation-timing-function: ease-in-out;
2437 | opacity: 1;
2438 | }
2439 |
2440 | 100% {
2441 | -webkit-transform: translate3d(0, 700px, 0);
2442 | transform: translate3d(0, 700px, 0);
2443 | opacity: 0;
2444 | }
2445 | }
2446 |
2447 | .hinge {
2448 | -webkit-animation-name: hinge;
2449 | animation-name: hinge;
2450 | }
2451 |
2452 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2453 |
2454 | @-webkit-keyframes rollIn {
2455 | 0% {
2456 | opacity: 0;
2457 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2458 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2459 | }
2460 |
2461 | 100% {
2462 | opacity: 1;
2463 | -webkit-transform: none;
2464 | transform: none;
2465 | }
2466 | }
2467 |
2468 | @keyframes rollIn {
2469 | 0% {
2470 | opacity: 0;
2471 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2472 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2473 | }
2474 |
2475 | 100% {
2476 | opacity: 1;
2477 | -webkit-transform: none;
2478 | transform: none;
2479 | }
2480 | }
2481 |
2482 | .rollIn {
2483 | -webkit-animation-name: rollIn;
2484 | animation-name: rollIn;
2485 | }
2486 |
2487 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2488 |
2489 | @-webkit-keyframes rollOut {
2490 | 0% {
2491 | opacity: 1;
2492 | }
2493 |
2494 | 100% {
2495 | opacity: 0;
2496 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2497 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2498 | }
2499 | }
2500 |
2501 | @keyframes rollOut {
2502 | 0% {
2503 | opacity: 1;
2504 | }
2505 |
2506 | 100% {
2507 | opacity: 0;
2508 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2509 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2510 | }
2511 | }
2512 |
2513 | .rollOut {
2514 | -webkit-animation-name: rollOut;
2515 | animation-name: rollOut;
2516 | }
2517 |
2518 | @-webkit-keyframes zoomIn {
2519 | 0% {
2520 | opacity: 0;
2521 | -webkit-transform: scale3d(.3, .3, .3);
2522 | transform: scale3d(.3, .3, .3);
2523 | }
2524 |
2525 | 50% {
2526 | opacity: 1;
2527 | }
2528 | }
2529 |
2530 | @keyframes zoomIn {
2531 | 0% {
2532 | opacity: 0;
2533 | -webkit-transform: scale3d(.3, .3, .3);
2534 | transform: scale3d(.3, .3, .3);
2535 | }
2536 |
2537 | 50% {
2538 | opacity: 1;
2539 | }
2540 | }
2541 |
2542 | .zoomIn {
2543 | -webkit-animation-name: zoomIn;
2544 | animation-name: zoomIn;
2545 | }
2546 |
2547 | @-webkit-keyframes zoomInDown {
2548 | 0% {
2549 | opacity: 0;
2550 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2551 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2552 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2553 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2554 | }
2555 |
2556 | 60% {
2557 | opacity: 1;
2558 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2559 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2560 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2561 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2562 | }
2563 | }
2564 |
2565 | @keyframes zoomInDown {
2566 | 0% {
2567 | opacity: 0;
2568 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2569 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2570 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2571 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2572 | }
2573 |
2574 | 60% {
2575 | opacity: 1;
2576 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2577 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2578 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2579 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2580 | }
2581 | }
2582 |
2583 | .zoomInDown {
2584 | -webkit-animation-name: zoomInDown;
2585 | animation-name: zoomInDown;
2586 | }
2587 |
2588 | @-webkit-keyframes zoomInLeft {
2589 | 0% {
2590 | opacity: 0;
2591 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2592 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2593 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2594 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2595 | }
2596 |
2597 | 60% {
2598 | opacity: 1;
2599 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2600 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2601 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2602 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2603 | }
2604 | }
2605 |
2606 | @keyframes zoomInLeft {
2607 | 0% {
2608 | opacity: 0;
2609 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2610 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2611 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2612 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2613 | }
2614 |
2615 | 60% {
2616 | opacity: 1;
2617 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2618 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2619 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2620 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2621 | }
2622 | }
2623 |
2624 | .zoomInLeft {
2625 | -webkit-animation-name: zoomInLeft;
2626 | animation-name: zoomInLeft;
2627 | }
2628 |
2629 | @-webkit-keyframes zoomInRight {
2630 | 0% {
2631 | opacity: 0;
2632 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2633 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2634 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2635 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2636 | }
2637 |
2638 | 60% {
2639 | opacity: 1;
2640 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2641 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2642 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2643 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2644 | }
2645 | }
2646 |
2647 | @keyframes zoomInRight {
2648 | 0% {
2649 | opacity: 0;
2650 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2651 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2652 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2653 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2654 | }
2655 |
2656 | 60% {
2657 | opacity: 1;
2658 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2659 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2660 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2661 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2662 | }
2663 | }
2664 |
2665 | .zoomInRight {
2666 | -webkit-animation-name: zoomInRight;
2667 | animation-name: zoomInRight;
2668 | }
2669 |
2670 | @-webkit-keyframes zoomInUp {
2671 | 0% {
2672 | opacity: 0;
2673 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2674 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2675 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2676 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2677 | }
2678 |
2679 | 60% {
2680 | opacity: 1;
2681 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2682 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2683 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2684 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2685 | }
2686 | }
2687 |
2688 | @keyframes zoomInUp {
2689 | 0% {
2690 | opacity: 0;
2691 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2692 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2693 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2694 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2695 | }
2696 |
2697 | 60% {
2698 | opacity: 1;
2699 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2700 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2701 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2702 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2703 | }
2704 | }
2705 |
2706 | .zoomInUp {
2707 | -webkit-animation-name: zoomInUp;
2708 | animation-name: zoomInUp;
2709 | }
2710 |
2711 | @-webkit-keyframes zoomOut {
2712 | 0% {
2713 | opacity: 1;
2714 | }
2715 |
2716 | 50% {
2717 | opacity: 0;
2718 | -webkit-transform: scale3d(.3, .3, .3);
2719 | transform: scale3d(.3, .3, .3);
2720 | }
2721 |
2722 | 100% {
2723 | opacity: 0;
2724 | }
2725 | }
2726 |
2727 | @keyframes zoomOut {
2728 | 0% {
2729 | opacity: 1;
2730 | }
2731 |
2732 | 50% {
2733 | opacity: 0;
2734 | -webkit-transform: scale3d(.3, .3, .3);
2735 | transform: scale3d(.3, .3, .3);
2736 | }
2737 |
2738 | 100% {
2739 | opacity: 0;
2740 | }
2741 | }
2742 |
2743 | .zoomOut {
2744 | -webkit-animation-name: zoomOut;
2745 | animation-name: zoomOut;
2746 | }
2747 |
2748 | @-webkit-keyframes zoomOutDown {
2749 | 40% {
2750 | opacity: 1;
2751 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2752 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2753 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2754 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2755 | }
2756 |
2757 | 100% {
2758 | opacity: 0;
2759 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2760 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2761 | -webkit-transform-origin: center bottom;
2762 | transform-origin: center bottom;
2763 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2764 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2765 | }
2766 | }
2767 |
2768 | @keyframes zoomOutDown {
2769 | 40% {
2770 | opacity: 1;
2771 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2772 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2773 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2774 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2775 | }
2776 |
2777 | 100% {
2778 | opacity: 0;
2779 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2780 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2781 | -webkit-transform-origin: center bottom;
2782 | transform-origin: center bottom;
2783 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2784 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2785 | }
2786 | }
2787 |
2788 | .zoomOutDown {
2789 | -webkit-animation-name: zoomOutDown;
2790 | animation-name: zoomOutDown;
2791 | }
2792 |
2793 | @-webkit-keyframes zoomOutLeft {
2794 | 40% {
2795 | opacity: 1;
2796 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2797 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2798 | }
2799 |
2800 | 100% {
2801 | opacity: 0;
2802 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2803 | transform: scale(.1) translate3d(-2000px, 0, 0);
2804 | -webkit-transform-origin: left center;
2805 | transform-origin: left center;
2806 | }
2807 | }
2808 |
2809 | @keyframes zoomOutLeft {
2810 | 40% {
2811 | opacity: 1;
2812 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2813 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2814 | }
2815 |
2816 | 100% {
2817 | opacity: 0;
2818 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2819 | transform: scale(.1) translate3d(-2000px, 0, 0);
2820 | -webkit-transform-origin: left center;
2821 | transform-origin: left center;
2822 | }
2823 | }
2824 |
2825 | .zoomOutLeft {
2826 | -webkit-animation-name: zoomOutLeft;
2827 | animation-name: zoomOutLeft;
2828 | }
2829 |
2830 | @-webkit-keyframes zoomOutRight {
2831 | 40% {
2832 | opacity: 1;
2833 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2834 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2835 | }
2836 |
2837 | 100% {
2838 | opacity: 0;
2839 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
2840 | transform: scale(.1) translate3d(2000px, 0, 0);
2841 | -webkit-transform-origin: right center;
2842 | transform-origin: right center;
2843 | }
2844 | }
2845 |
2846 | @keyframes zoomOutRight {
2847 | 40% {
2848 | opacity: 1;
2849 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2850 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2851 | }
2852 |
2853 | 100% {
2854 | opacity: 0;
2855 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
2856 | transform: scale(.1) translate3d(2000px, 0, 0);
2857 | -webkit-transform-origin: right center;
2858 | transform-origin: right center;
2859 | }
2860 | }
2861 |
2862 | .zoomOutRight {
2863 | -webkit-animation-name: zoomOutRight;
2864 | animation-name: zoomOutRight;
2865 | }
2866 |
2867 | @-webkit-keyframes zoomOutUp {
2868 | 40% {
2869 | opacity: 1;
2870 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2871 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2872 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2873 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2874 | }
2875 |
2876 | 100% {
2877 | opacity: 0;
2878 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2879 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2880 | -webkit-transform-origin: center bottom;
2881 | transform-origin: center bottom;
2882 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2883 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2884 | }
2885 | }
2886 |
2887 | @keyframes zoomOutUp {
2888 | 40% {
2889 | opacity: 1;
2890 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2891 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2892 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2893 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2894 | }
2895 |
2896 | 100% {
2897 | opacity: 0;
2898 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2899 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2900 | -webkit-transform-origin: center bottom;
2901 | transform-origin: center bottom;
2902 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2903 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2904 | }
2905 | }
2906 |
2907 | .zoomOutUp {
2908 | -webkit-animation-name: zoomOutUp;
2909 | animation-name: zoomOutUp;
2910 | }
2911 |
2912 | @-webkit-keyframes slideInDown {
2913 | 0% {
2914 | -webkit-transform: translateY(-100%);
2915 | transform: translateY(-100%);
2916 | visibility: visible;
2917 | }
2918 |
2919 | 100% {
2920 | -webkit-transform: translateY(0);
2921 | transform: translateY(0);
2922 | }
2923 | }
2924 |
2925 | @keyframes slideInDown {
2926 | 0% {
2927 | -webkit-transform: translateY(-100%);
2928 | transform: translateY(-100%);
2929 | visibility: visible;
2930 | }
2931 |
2932 | 100% {
2933 | -webkit-transform: translateY(0);
2934 | transform: translateY(0);
2935 | }
2936 | }
2937 |
2938 | .slideInDown {
2939 | -webkit-animation-name: slideInDown;
2940 | animation-name: slideInDown;
2941 | }
2942 |
2943 | @-webkit-keyframes slideInLeft {
2944 | 0% {
2945 | -webkit-transform: translateX(-100%);
2946 | transform: translateX(-100%);
2947 | visibility: visible;
2948 | }
2949 |
2950 | 100% {
2951 | -webkit-transform: translateX(0);
2952 | transform: translateX(0);
2953 | }
2954 | }
2955 |
2956 | @keyframes slideInLeft {
2957 | 0% {
2958 | -webkit-transform: translateX(-100%);
2959 | transform: translateX(-100%);
2960 | visibility: visible;
2961 | }
2962 |
2963 | 100% {
2964 | -webkit-transform: translateX(0);
2965 | transform: translateX(0);
2966 | }
2967 | }
2968 |
2969 | .slideInLeft {
2970 | -webkit-animation-name: slideInLeft;
2971 | animation-name: slideInLeft;
2972 | }
2973 |
2974 | @-webkit-keyframes slideInRight {
2975 | 0% {
2976 | -webkit-transform: translateX(100%);
2977 | transform: translateX(100%);
2978 | visibility: visible;
2979 | }
2980 |
2981 | 100% {
2982 | -webkit-transform: translateX(0);
2983 | transform: translateX(0);
2984 | }
2985 | }
2986 |
2987 | @keyframes slideInRight {
2988 | 0% {
2989 | -webkit-transform: translateX(100%);
2990 | transform: translateX(100%);
2991 | visibility: visible;
2992 | }
2993 |
2994 | 100% {
2995 | -webkit-transform: translateX(0);
2996 | transform: translateX(0);
2997 | }
2998 | }
2999 |
3000 | .slideInRight {
3001 | -webkit-animation-name: slideInRight;
3002 | animation-name: slideInRight;
3003 | }
3004 |
3005 | @-webkit-keyframes slideInUp {
3006 | 0% {
3007 | -webkit-transform: translateY(100%);
3008 | transform: translateY(100%);
3009 | visibility: visible;
3010 | }
3011 |
3012 | 100% {
3013 | -webkit-transform: translateY(0);
3014 | transform: translateY(0);
3015 | }
3016 | }
3017 |
3018 | @keyframes slideInUp {
3019 | 0% {
3020 | -webkit-transform: translateY(100%);
3021 | transform: translateY(100%);
3022 | visibility: visible;
3023 | }
3024 |
3025 | 100% {
3026 | -webkit-transform: translateY(0);
3027 | transform: translateY(0);
3028 | }
3029 | }
3030 |
3031 | .slideInUp {
3032 | -webkit-animation-name: slideInUp;
3033 | animation-name: slideInUp;
3034 | }
3035 |
3036 | @-webkit-keyframes slideOutDown {
3037 | 0% {
3038 | -webkit-transform: translateY(0);
3039 | transform: translateY(0);
3040 | }
3041 |
3042 | 100% {
3043 | visibility: hidden;
3044 | -webkit-transform: translateY(100%);
3045 | transform: translateY(100%);
3046 | }
3047 | }
3048 |
3049 | @keyframes slideOutDown {
3050 | 0% {
3051 | -webkit-transform: translateY(0);
3052 | transform: translateY(0);
3053 | }
3054 |
3055 | 100% {
3056 | visibility: hidden;
3057 | -webkit-transform: translateY(100%);
3058 | transform: translateY(100%);
3059 | }
3060 | }
3061 |
3062 | .slideOutDown {
3063 | -webkit-animation-name: slideOutDown;
3064 | animation-name: slideOutDown;
3065 | }
3066 |
3067 | @-webkit-keyframes slideOutLeft {
3068 | 0% {
3069 | -webkit-transform: translateX(0);
3070 | transform: translateX(0);
3071 | }
3072 |
3073 | 100% {
3074 | visibility: hidden;
3075 | -webkit-transform: translateX(-100%);
3076 | transform: translateX(-100%);
3077 | }
3078 | }
3079 |
3080 | @keyframes slideOutLeft {
3081 | 0% {
3082 | -webkit-transform: translateX(0);
3083 | transform: translateX(0);
3084 | }
3085 |
3086 | 100% {
3087 | visibility: hidden;
3088 | -webkit-transform: translateX(-100%);
3089 | transform: translateX(-100%);
3090 | }
3091 | }
3092 |
3093 | .slideOutLeft {
3094 | -webkit-animation-name: slideOutLeft;
3095 | animation-name: slideOutLeft;
3096 | }
3097 |
3098 | @-webkit-keyframes slideOutRight {
3099 | 0% {
3100 | -webkit-transform: translateX(0);
3101 | transform: translateX(0);
3102 | }
3103 |
3104 | 100% {
3105 | visibility: hidden;
3106 | -webkit-transform: translateX(100%);
3107 | transform: translateX(100%);
3108 | }
3109 | }
3110 |
3111 | @keyframes slideOutRight {
3112 | 0% {
3113 | -webkit-transform: translateX(0);
3114 | transform: translateX(0);
3115 | }
3116 |
3117 | 100% {
3118 | visibility: hidden;
3119 | -webkit-transform: translateX(100%);
3120 | transform: translateX(100%);
3121 | }
3122 | }
3123 |
3124 | .slideOutRight {
3125 | -webkit-animation-name: slideOutRight;
3126 | animation-name: slideOutRight;
3127 | }
3128 |
3129 | @-webkit-keyframes slideOutUp {
3130 | 0% {
3131 | -webkit-transform: translateY(0);
3132 | transform: translateY(0);
3133 | }
3134 |
3135 | 100% {
3136 | visibility: hidden;
3137 | -webkit-transform: translateY(-100%);
3138 | transform: translateY(-100%);
3139 | }
3140 | }
3141 |
3142 | @keyframes slideOutUp {
3143 | 0% {
3144 | -webkit-transform: translateY(0);
3145 | transform: translateY(0);
3146 | }
3147 |
3148 | 100% {
3149 | visibility: hidden;
3150 | -webkit-transform: translateY(-100%);
3151 | transform: translateY(-100%);
3152 | }
3153 | }
3154 |
3155 | .slideOutUp {
3156 | -webkit-animation-name: slideOutUp;
3157 | animation-name: slideOutUp;
3158 | }
3159 |
--------------------------------------------------------------------------------