Flat css-only countdown and countup

Developer
Size
11,156 Kb
Views
6,072

How do I make an flat css-only countdown and countup?

No javascript, pure CSS!. What is a flat css-only countdown and countup? How do you make a flat css-only countdown and countup? This script and codes were developed by Daniesy on 10 January 2023, Tuesday.

Flat css-only countdown and countup Previews

Flat css-only countdown and countup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat css-only countdown and countup</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
.gradient-white-gray { background: linear-gradient(to bottom, #000000 0%, #111111 100%); /* W3C */
}
body { background: #e74c3c;
}
h1 { padding: 20px 50px; color: #c0392b; font-size: 48px; background: black;
}
.clock { display: inline-block; vertical-align: top; color: #E74C3C; margin: 40px 50px; box-shadow: 4px 4px 0 4px #FFF, 8px 8px 0 8px #c0392b;
}
.clock .up, .clock .down { left: 0; right: 0; text-align: center; overflow: hidden; position: absolute; backface-visibility: hidden; animation-fill-mode: forwards;
}
.clock .up { top: 0; bottom: 50%; transform-origin: 50% 100%;
}
.clock .down { top: 50%; bottom: 0; background: black; transform-origin: 50% 0%; line-height: 0px;
}
.clock-fade { width: 100px; height: 50px; background: black; position: relative; padding: 5px;
}
.clock-fade .tick { position: absolute; top: 0; bottom: 0; left: 0; right: 0; font-size: 50px; text-align: center; line-height: 47.5px; background: black;
}
.clock-fade .tick-59 { animation: fade 2s 1; animation-delay: -1s; animation-fill-mode: forwards;
}
.clock-fade .tick-58 { animation: fade 2s 1; animation-delay: 0s; animation-fill-mode: forwards;
}
.clock-fade .tick-57 { animation: fade 2s 1; animation-delay: 1s; animation-fill-mode: forwards;
}
.clock-fade .tick-56 { animation: fade 2s 1; animation-delay: 2s; animation-fill-mode: forwards;
}
.clock-fade .tick-55 { animation: fade 2s 1; animation-delay: 3s; animation-fill-mode: forwards;
}
.clock-fade .tick-54 { animation: fade 2s 1; animation-delay: 4s; animation-fill-mode: forwards;
}
.clock-fade .tick-53 { animation: fade 2s 1; animation-delay: 5s; animation-fill-mode: forwards;
}
.clock-fade .tick-52 { animation: fade 2s 1; animation-delay: 6s; animation-fill-mode: forwards;
}
.clock-fade .tick-51 { animation: fade 2s 1; animation-delay: 7s; animation-fill-mode: forwards;
}
.clock-fade .tick-50 { animation: fade 2s 1; animation-delay: 8s; animation-fill-mode: forwards;
}
.clock-fade .tick-49 { animation: fade 2s 1; animation-delay: 9s; animation-fill-mode: forwards;
}
.clock-fade .tick-48 { animation: fade 2s 1; animation-delay: 10s; animation-fill-mode: forwards;
}
.clock-fade .tick-47 { animation: fade 2s 1; animation-delay: 11s; animation-fill-mode: forwards;
}
.clock-fade .tick-46 { animation: fade 2s 1; animation-delay: 12s; animation-fill-mode: forwards;
}
.clock-fade .tick-45 { animation: fade 2s 1; animation-delay: 13s; animation-fill-mode: forwards;
}
.clock-fade .tick-44 { animation: fade 2s 1; animation-delay: 14s; animation-fill-mode: forwards;
}
.clock-fade .tick-43 { animation: fade 2s 1; animation-delay: 15s; animation-fill-mode: forwards;
}
.clock-fade .tick-42 { animation: fade 2s 1; animation-delay: 16s; animation-fill-mode: forwards;
}
.clock-fade .tick-41 { animation: fade 2s 1; animation-delay: 17s; animation-fill-mode: forwards;
}
.clock-fade .tick-40 { animation: fade 2s 1; animation-delay: 18s; animation-fill-mode: forwards;
}
.clock-fade .tick-39 { animation: fade 2s 1; animation-delay: 19s; animation-fill-mode: forwards;
}
.clock-fade .tick-38 { animation: fade 2s 1; animation-delay: 20s; animation-fill-mode: forwards;
}
.clock-fade .tick-37 { animation: fade 2s 1; animation-delay: 21s; animation-fill-mode: forwards;
}
.clock-fade .tick-36 { animation: fade 2s 1; animation-delay: 22s; animation-fill-mode: forwards;
}
.clock-fade .tick-35 { animation: fade 2s 1; animation-delay: 23s; animation-fill-mode: forwards;
}
.clock-fade .tick-34 { animation: fade 2s 1; animation-delay: 24s; animation-fill-mode: forwards;
}
.clock-fade .tick-33 { animation: fade 2s 1; animation-delay: 25s; animation-fill-mode: forwards;
}
.clock-fade .tick-32 { animation: fade 2s 1; animation-delay: 26s; animation-fill-mode: forwards;
}
.clock-fade .tick-31 { animation: fade 2s 1; animation-delay: 27s; animation-fill-mode: forwards;
}
.clock-fade .tick-30 { animation: fade 2s 1; animation-delay: 28s; animation-fill-mode: forwards;
}
.clock-fade .tick-29 { animation: fade 2s 1; animation-delay: 29s; animation-fill-mode: forwards;
}
.clock-fade .tick-28 { animation: fade 2s 1; animation-delay: 30s; animation-fill-mode: forwards;
}
.clock-fade .tick-27 { animation: fade 2s 1; animation-delay: 31s; animation-fill-mode: forwards;
}
.clock-fade .tick-26 { animation: fade 2s 1; animation-delay: 32s; animation-fill-mode: forwards;
}
.clock-fade .tick-25 { animation: fade 2s 1; animation-delay: 33s; animation-fill-mode: forwards;
}
.clock-fade .tick-24 { animation: fade 2s 1; animation-delay: 34s; animation-fill-mode: forwards;
}
.clock-fade .tick-23 { animation: fade 2s 1; animation-delay: 35s; animation-fill-mode: forwards;
}
.clock-fade .tick-22 { animation: fade 2s 1; animation-delay: 36s; animation-fill-mode: forwards;
}
.clock-fade .tick-21 { animation: fade 2s 1; animation-delay: 37s; animation-fill-mode: forwards;
}
.clock-fade .tick-20 { animation: fade 2s 1; animation-delay: 38s; animation-fill-mode: forwards;
}
.clock-fade .tick-19 { animation: fade 2s 1; animation-delay: 39s; animation-fill-mode: forwards;
}
.clock-fade .tick-18 { animation: fade 2s 1; animation-delay: 40s; animation-fill-mode: forwards;
}
.clock-fade .tick-17 { animation: fade 2s 1; animation-delay: 41s; animation-fill-mode: forwards;
}
.clock-fade .tick-16 { animation: fade 2s 1; animation-delay: 42s; animation-fill-mode: forwards;
}
.clock-fade .tick-15 { animation: fade 2s 1; animation-delay: 43s; animation-fill-mode: forwards;
}
.clock-fade .tick-14 { animation: fade 2s 1; animation-delay: 44s; animation-fill-mode: forwards;
}
.clock-fade .tick-13 { animation: fade 2s 1; animation-delay: 45s; animation-fill-mode: forwards;
}
.clock-fade .tick-12 { animation: fade 2s 1; animation-delay: 46s; animation-fill-mode: forwards;
}
.clock-fade .tick-11 { animation: fade 2s 1; animation-delay: 47s; animation-fill-mode: forwards;
}
.clock-fade .tick-10 { animation: fade 2s 1; animation-delay: 48s; animation-fill-mode: forwards;
}
.clock-fade .tick-9 { animation: fade 2s 1; animation-delay: 49s; animation-fill-mode: forwards;
}
.clock-fade .tick-8 { animation: fade 2s 1; animation-delay: 50s; animation-fill-mode: forwards;
}
.clock-fade .tick-7 { animation: fade 2s 1; animation-delay: 51s; animation-fill-mode: forwards;
}
.clock-fade .tick-6 { animation: fade 2s 1; animation-delay: 52s; animation-fill-mode: forwards;
}
.clock-fade .tick-5 { animation: fade 2s 1; animation-delay: 53s; animation-fill-mode: forwards;
}
.clock-fade .tick-4 { animation: fade 2s 1; animation-delay: 54s; animation-fill-mode: forwards;
}
.clock-fade .tick-3 { animation: fade 2s 1; animation-delay: 55s; animation-fill-mode: forwards;
}
.clock-fade .tick-2 { animation: fade 2s 1; animation-delay: 56s; animation-fill-mode: forwards;
}
.clock-fade .tick-1 { animation: fade 2s 1; animation-delay: 57s; animation-fill-mode: forwards;
}
.clock-fade .tick-0 { animation: fade 2s 1; animation-delay: 58s; animation-fill-mode: forwards;
}
.clock-reverse { width: 200px; height: 100px; background: black; position: relative; padding: 10px; perspective: 1000px;
}
.clock-reverse .up, .clock-reverse .down { font-size: 90px;
}
.clock-reverse .up { line-height: 100px;
}
.clock-reverse .up-59 { animation: flip-up 1s 1; animation-delay: 0s; animation-fill-mode: forwards; z-index: 59;
}
.clock-reverse .up-58 { animation: flip-up 1s 1; animation-delay: 1s; animation-fill-mode: forwards; z-index: 58;
}
.clock-reverse .up-57 { animation: flip-up 1s 1; animation-delay: 2s; animation-fill-mode: forwards; z-index: 57;
}
.clock-reverse .up-56 { animation: flip-up 1s 1; animation-delay: 3s; animation-fill-mode: forwards; z-index: 56;
}
.clock-reverse .up-55 { animation: flip-up 1s 1; animation-delay: 4s; animation-fill-mode: forwards; z-index: 55;
}
.clock-reverse .up-54 { animation: flip-up 1s 1; animation-delay: 5s; animation-fill-mode: forwards; z-index: 54;
}
.clock-reverse .up-53 { animation: flip-up 1s 1; animation-delay: 6s; animation-fill-mode: forwards; z-index: 53;
}
.clock-reverse .up-52 { animation: flip-up 1s 1; animation-delay: 7s; animation-fill-mode: forwards; z-index: 52;
}
.clock-reverse .up-51 { animation: flip-up 1s 1; animation-delay: 8s; animation-fill-mode: forwards; z-index: 51;
}
.clock-reverse .up-50 { animation: flip-up 1s 1; animation-delay: 9s; animation-fill-mode: forwards; z-index: 50;
}
.clock-reverse .up-49 { animation: flip-up 1s 1; animation-delay: 10s; animation-fill-mode: forwards; z-index: 49;
}
.clock-reverse .up-48 { animation: flip-up 1s 1; animation-delay: 11s; animation-fill-mode: forwards; z-index: 48;
}
.clock-reverse .up-47 { animation: flip-up 1s 1; animation-delay: 12s; animation-fill-mode: forwards; z-index: 47;
}
.clock-reverse .up-46 { animation: flip-up 1s 1; animation-delay: 13s; animation-fill-mode: forwards; z-index: 46;
}
.clock-reverse .up-45 { animation: flip-up 1s 1; animation-delay: 14s; animation-fill-mode: forwards; z-index: 45;
}
.clock-reverse .up-44 { animation: flip-up 1s 1; animation-delay: 15s; animation-fill-mode: forwards; z-index: 44;
}
.clock-reverse .up-43 { animation: flip-up 1s 1; animation-delay: 16s; animation-fill-mode: forwards; z-index: 43;
}
.clock-reverse .up-42 { animation: flip-up 1s 1; animation-delay: 17s; animation-fill-mode: forwards; z-index: 42;
}
.clock-reverse .up-41 { animation: flip-up 1s 1; animation-delay: 18s; animation-fill-mode: forwards; z-index: 41;
}
.clock-reverse .up-40 { animation: flip-up 1s 1; animation-delay: 19s; animation-fill-mode: forwards; z-index: 40;
}
.clock-reverse .up-39 { animation: flip-up 1s 1; animation-delay: 20s; animation-fill-mode: forwards; z-index: 39;
}
.clock-reverse .up-38 { animation: flip-up 1s 1; animation-delay: 21s; animation-fill-mode: forwards; z-index: 38;
}
.clock-reverse .up-37 { animation: flip-up 1s 1; animation-delay: 22s; animation-fill-mode: forwards; z-index: 37;
}
.clock-reverse .up-36 { animation: flip-up 1s 1; animation-delay: 23s; animation-fill-mode: forwards; z-index: 36;
}
.clock-reverse .up-35 { animation: flip-up 1s 1; animation-delay: 24s; animation-fill-mode: forwards; z-index: 35;
}
.clock-reverse .up-34 { animation: flip-up 1s 1; animation-delay: 25s; animation-fill-mode: forwards; z-index: 34;
}
.clock-reverse .up-33 { animation: flip-up 1s 1; animation-delay: 26s; animation-fill-mode: forwards; z-index: 33;
}
.clock-reverse .up-32 { animation: flip-up 1s 1; animation-delay: 27s; animation-fill-mode: forwards; z-index: 32;
}
.clock-reverse .up-31 { animation: flip-up 1s 1; animation-delay: 28s; animation-fill-mode: forwards; z-index: 31;
}
.clock-reverse .up-30 { animation: flip-up 1s 1; animation-delay: 29s; animation-fill-mode: forwards; z-index: 30;
}
.clock-reverse .up-29 { animation: flip-up 1s 1; animation-delay: 30s; animation-fill-mode: forwards; z-index: 29;
}
.clock-reverse .up-28 { animation: flip-up 1s 1; animation-delay: 31s; animation-fill-mode: forwards; z-index: 28;
}
.clock-reverse .up-27 { animation: flip-up 1s 1; animation-delay: 32s; animation-fill-mode: forwards; z-index: 27;
}
.clock-reverse .up-26 { animation: flip-up 1s 1; animation-delay: 33s; animation-fill-mode: forwards; z-index: 26;
}
.clock-reverse .up-25 { animation: flip-up 1s 1; animation-delay: 34s; animation-fill-mode: forwards; z-index: 25;
}
.clock-reverse .up-24 { animation: flip-up 1s 1; animation-delay: 35s; animation-fill-mode: forwards; z-index: 24;
}
.clock-reverse .up-23 { animation: flip-up 1s 1; animation-delay: 36s; animation-fill-mode: forwards; z-index: 23;
}
.clock-reverse .up-22 { animation: flip-up 1s 1; animation-delay: 37s; animation-fill-mode: forwards; z-index: 22;
}
.clock-reverse .up-21 { animation: flip-up 1s 1; animation-delay: 38s; animation-fill-mode: forwards; z-index: 21;
}
.clock-reverse .up-20 { animation: flip-up 1s 1; animation-delay: 39s; animation-fill-mode: forwards; z-index: 20;
}
.clock-reverse .up-19 { animation: flip-up 1s 1; animation-delay: 40s; animation-fill-mode: forwards; z-index: 19;
}
.clock-reverse .up-18 { animation: flip-up 1s 1; animation-delay: 41s; animation-fill-mode: forwards; z-index: 18;
}
.clock-reverse .up-17 { animation: flip-up 1s 1; animation-delay: 42s; animation-fill-mode: forwards; z-index: 17;
}
.clock-reverse .up-16 { animation: flip-up 1s 1; animation-delay: 43s; animation-fill-mode: forwards; z-index: 16;
}
.clock-reverse .up-15 { animation: flip-up 1s 1; animation-delay: 44s; animation-fill-mode: forwards; z-index: 15;
}
.clock-reverse .up-14 { animation: flip-up 1s 1; animation-delay: 45s; animation-fill-mode: forwards; z-index: 14;
}
.clock-reverse .up-13 { animation: flip-up 1s 1; animation-delay: 46s; animation-fill-mode: forwards; z-index: 13;
}
.clock-reverse .up-12 { animation: flip-up 1s 1; animation-delay: 47s; animation-fill-mode: forwards; z-index: 12;
}
.clock-reverse .up-11 { animation: flip-up 1s 1; animation-delay: 48s; animation-fill-mode: forwards; z-index: 11;
}
.clock-reverse .up-10 { animation: flip-up 1s 1; animation-delay: 49s; animation-fill-mode: forwards; z-index: 10;
}
.clock-reverse .up-9 { animation: flip-up 1s 1; animation-delay: 50s; animation-fill-mode: forwards; z-index: 9;
}
.clock-reverse .up-8 { animation: flip-up 1s 1; animation-delay: 51s; animation-fill-mode: forwards; z-index: 8;
}
.clock-reverse .up-7 { animation: flip-up 1s 1; animation-delay: 52s; animation-fill-mode: forwards; z-index: 7;
}
.clock-reverse .up-6 { animation: flip-up 1s 1; animation-delay: 53s; animation-fill-mode: forwards; z-index: 6;
}
.clock-reverse .up-5 { animation: flip-up 1s 1; animation-delay: 54s; animation-fill-mode: forwards; z-index: 5;
}
.clock-reverse .up-4 { animation: flip-up 1s 1; animation-delay: 55s; animation-fill-mode: forwards; z-index: 4;
}
.clock-reverse .up-3 { animation: flip-up 1s 1; animation-delay: 56s; animation-fill-mode: forwards; z-index: 3;
}
.clock-reverse .up-2 { animation: flip-up 1s 1; animation-delay: 57s; animation-fill-mode: forwards; z-index: 2;
}
.clock-reverse .up-1 { animation: flip-up 1s 1; animation-delay: 58s; animation-fill-mode: forwards; z-index: 1;
}
.clock-reverse .down-59 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: -1s; animation-fill-mode: forwards; z-index: 0;
}
.clock-reverse .down-58 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 0s; animation-fill-mode: forwards; z-index: 1;
}
.clock-reverse .down-57 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 1s; animation-fill-mode: forwards; z-index: 2;
}
.clock-reverse .down-56 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 2s; animation-fill-mode: forwards; z-index: 3;
}
.clock-reverse .down-55 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 3s; animation-fill-mode: forwards; z-index: 4;
}
.clock-reverse .down-54 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 4s; animation-fill-mode: forwards; z-index: 5;
}
.clock-reverse .down-53 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 5s; animation-fill-mode: forwards; z-index: 6;
}
.clock-reverse .down-52 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 6s; animation-fill-mode: forwards; z-index: 7;
}
.clock-reverse .down-51 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 7s; animation-fill-mode: forwards; z-index: 8;
}
.clock-reverse .down-50 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 8s; animation-fill-mode: forwards; z-index: 9;
}
.clock-reverse .down-49 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 9s; animation-fill-mode: forwards; z-index: 10;
}
.clock-reverse .down-48 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 10s; animation-fill-mode: forwards; z-index: 11;
}
.clock-reverse .down-47 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 11s; animation-fill-mode: forwards; z-index: 12;
}
.clock-reverse .down-46 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 12s; animation-fill-mode: forwards; z-index: 13;
}
.clock-reverse .down-45 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 13s; animation-fill-mode: forwards; z-index: 14;
}
.clock-reverse .down-44 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 14s; animation-fill-mode: forwards; z-index: 15;
}
.clock-reverse .down-43 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 15s; animation-fill-mode: forwards; z-index: 16;
}
.clock-reverse .down-42 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 16s; animation-fill-mode: forwards; z-index: 17;
}
.clock-reverse .down-41 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 17s; animation-fill-mode: forwards; z-index: 18;
}
.clock-reverse .down-40 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 18s; animation-fill-mode: forwards; z-index: 19;
}
.clock-reverse .down-39 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 19s; animation-fill-mode: forwards; z-index: 20;
}
.clock-reverse .down-38 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 20s; animation-fill-mode: forwards; z-index: 21;
}
.clock-reverse .down-37 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 21s; animation-fill-mode: forwards; z-index: 22;
}
.clock-reverse .down-36 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 22s; animation-fill-mode: forwards; z-index: 23;
}
.clock-reverse .down-35 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 23s; animation-fill-mode: forwards; z-index: 24;
}
.clock-reverse .down-34 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 24s; animation-fill-mode: forwards; z-index: 25;
}
.clock-reverse .down-33 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 25s; animation-fill-mode: forwards; z-index: 26;
}
.clock-reverse .down-32 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 26s; animation-fill-mode: forwards; z-index: 27;
}
.clock-reverse .down-31 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 27s; animation-fill-mode: forwards; z-index: 28;
}
.clock-reverse .down-30 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 28s; animation-fill-mode: forwards; z-index: 29;
}
.clock-reverse .down-29 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 29s; animation-fill-mode: forwards; z-index: 30;
}
.clock-reverse .down-28 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 30s; animation-fill-mode: forwards; z-index: 31;
}
.clock-reverse .down-27 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 31s; animation-fill-mode: forwards; z-index: 32;
}
.clock-reverse .down-26 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 32s; animation-fill-mode: forwards; z-index: 33;
}
.clock-reverse .down-25 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 33s; animation-fill-mode: forwards; z-index: 34;
}
.clock-reverse .down-24 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 34s; animation-fill-mode: forwards; z-index: 35;
}
.clock-reverse .down-23 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 35s; animation-fill-mode: forwards; z-index: 36;
}
.clock-reverse .down-22 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 36s; animation-fill-mode: forwards; z-index: 37;
}
.clock-reverse .down-21 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 37s; animation-fill-mode: forwards; z-index: 38;
}
.clock-reverse .down-20 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 38s; animation-fill-mode: forwards; z-index: 39;
}
.clock-reverse .down-19 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 39s; animation-fill-mode: forwards; z-index: 40;
}
.clock-reverse .down-18 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 40s; animation-fill-mode: forwards; z-index: 41;
}
.clock-reverse .down-17 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 41s; animation-fill-mode: forwards; z-index: 42;
}
.clock-reverse .down-16 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 42s; animation-fill-mode: forwards; z-index: 43;
}
.clock-reverse .down-15 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 43s; animation-fill-mode: forwards; z-index: 44;
}
.clock-reverse .down-14 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 44s; animation-fill-mode: forwards; z-index: 45;
}
.clock-reverse .down-13 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 45s; animation-fill-mode: forwards; z-index: 46;
}
.clock-reverse .down-12 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 46s; animation-fill-mode: forwards; z-index: 47;
}
.clock-reverse .down-11 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 47s; animation-fill-mode: forwards; z-index: 48;
}
.clock-reverse .down-10 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 48s; animation-fill-mode: forwards; z-index: 49;
}
.clock-reverse .down-9 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 49s; animation-fill-mode: forwards; z-index: 50;
}
.clock-reverse .down-8 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 50s; animation-fill-mode: forwards; z-index: 51;
}
.clock-reverse .down-7 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 51s; animation-fill-mode: forwards; z-index: 52;
}
.clock-reverse .down-6 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 52s; animation-fill-mode: forwards; z-index: 53;
}
.clock-reverse .down-5 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 53s; animation-fill-mode: forwards; z-index: 54;
}
.clock-reverse .down-4 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 54s; animation-fill-mode: forwards; z-index: 55;
}
.clock-reverse .down-3 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 55s; animation-fill-mode: forwards; z-index: 56;
}
.clock-reverse .down-2 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 56s; animation-fill-mode: forwards; z-index: 57;
}
.clock-reverse .down-1 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 57s; animation-fill-mode: forwards; z-index: 58;
}
.clock-reverse .down-0 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 58s; animation-fill-mode: forwards; z-index: 59;
}
.clock-count { width: 500px; height: 250px; background: black; position: relative; padding: 20px; perspective: 1000px;
}
.clock-count .up, .clock-count .down { font-size: 230px;
}
.clock-count .up { line-height: 250px;
}
.clock-count .up-1 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 1s; animation-fill-mode: forwards; z-index: 1;
}
.clock-count .up-2 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 2s; animation-fill-mode: forwards; z-index: 2;
}
.clock-count .up-3 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 3s; animation-fill-mode: forwards; z-index: 3;
}
.clock-count .up-4 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 4s; animation-fill-mode: forwards; z-index: 4;
}
.clock-count .up-5 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 5s; animation-fill-mode: forwards; z-index: 5;
}
.clock-count .up-6 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 6s; animation-fill-mode: forwards; z-index: 6;
}
.clock-count .up-7 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 7s; animation-fill-mode: forwards; z-index: 7;
}
.clock-count .up-8 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 8s; animation-fill-mode: forwards; z-index: 8;
}
.clock-count .up-9 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 9s; animation-fill-mode: forwards; z-index: 9;
}
.clock-count .up-10 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 10s; animation-fill-mode: forwards; z-index: 10;
}
.clock-count .up-11 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 11s; animation-fill-mode: forwards; z-index: 11;
}
.clock-count .up-12 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 12s; animation-fill-mode: forwards; z-index: 12;
}
.clock-count .up-13 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 13s; animation-fill-mode: forwards; z-index: 13;
}
.clock-count .up-14 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 14s; animation-fill-mode: forwards; z-index: 14;
}
.clock-count .up-15 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 15s; animation-fill-mode: forwards; z-index: 15;
}
.clock-count .up-16 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 16s; animation-fill-mode: forwards; z-index: 16;
}
.clock-count .up-17 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 17s; animation-fill-mode: forwards; z-index: 17;
}
.clock-count .up-18 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 18s; animation-fill-mode: forwards; z-index: 18;
}
.clock-count .up-19 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 19s; animation-fill-mode: forwards; z-index: 19;
}
.clock-count .up-20 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 20s; animation-fill-mode: forwards; z-index: 20;
}
.clock-count .up-21 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 21s; animation-fill-mode: forwards; z-index: 21;
}
.clock-count .up-22 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 22s; animation-fill-mode: forwards; z-index: 22;
}
.clock-count .up-23 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 23s; animation-fill-mode: forwards; z-index: 23;
}
.clock-count .up-24 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 24s; animation-fill-mode: forwards; z-index: 24;
}
.clock-count .up-25 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 25s; animation-fill-mode: forwards; z-index: 25;
}
.clock-count .up-26 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 26s; animation-fill-mode: forwards; z-index: 26;
}
.clock-count .up-27 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 27s; animation-fill-mode: forwards; z-index: 27;
}
.clock-count .up-28 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 28s; animation-fill-mode: forwards; z-index: 28;
}
.clock-count .up-29 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 29s; animation-fill-mode: forwards; z-index: 29;
}
.clock-count .up-30 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 30s; animation-fill-mode: forwards; z-index: 30;
}
.clock-count .up-31 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 31s; animation-fill-mode: forwards; z-index: 31;
}
.clock-count .up-32 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 32s; animation-fill-mode: forwards; z-index: 32;
}
.clock-count .up-33 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 33s; animation-fill-mode: forwards; z-index: 33;
}
.clock-count .up-34 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 34s; animation-fill-mode: forwards; z-index: 34;
}
.clock-count .up-35 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 35s; animation-fill-mode: forwards; z-index: 35;
}
.clock-count .up-36 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 36s; animation-fill-mode: forwards; z-index: 36;
}
.clock-count .up-37 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 37s; animation-fill-mode: forwards; z-index: 37;
}
.clock-count .up-38 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 38s; animation-fill-mode: forwards; z-index: 38;
}
.clock-count .up-39 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 39s; animation-fill-mode: forwards; z-index: 39;
}
.clock-count .up-40 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 40s; animation-fill-mode: forwards; z-index: 40;
}
.clock-count .up-41 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 41s; animation-fill-mode: forwards; z-index: 41;
}
.clock-count .up-42 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 42s; animation-fill-mode: forwards; z-index: 42;
}
.clock-count .up-43 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 43s; animation-fill-mode: forwards; z-index: 43;
}
.clock-count .up-44 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 44s; animation-fill-mode: forwards; z-index: 44;
}
.clock-count .up-45 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 45s; animation-fill-mode: forwards; z-index: 45;
}
.clock-count .up-46 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 46s; animation-fill-mode: forwards; z-index: 46;
}
.clock-count .up-47 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 47s; animation-fill-mode: forwards; z-index: 47;
}
.clock-count .up-48 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 48s; animation-fill-mode: forwards; z-index: 48;
}
.clock-count .up-49 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 49s; animation-fill-mode: forwards; z-index: 49;
}
.clock-count .up-50 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 50s; animation-fill-mode: forwards; z-index: 50;
}
.clock-count .up-51 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 51s; animation-fill-mode: forwards; z-index: 51;
}
.clock-count .up-52 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 52s; animation-fill-mode: forwards; z-index: 52;
}
.clock-count .up-53 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 53s; animation-fill-mode: forwards; z-index: 53;
}
.clock-count .up-54 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 54s; animation-fill-mode: forwards; z-index: 54;
}
.clock-count .up-55 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 55s; animation-fill-mode: forwards; z-index: 55;
}
.clock-count .up-56 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 56s; animation-fill-mode: forwards; z-index: 56;
}
.clock-count .up-57 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 57s; animation-fill-mode: forwards; z-index: 57;
}
.clock-count .up-58 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 58s; animation-fill-mode: forwards; z-index: 58;
}
.clock-count .up-59 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 59s; animation-fill-mode: forwards; z-index: 59;
}
.clock-count .down-0 { animation: flip-up 1s 1; animation-delay: 1s; animation-fill-mode: forwards; z-index: 100;
}
.clock-count .down-1 { animation: flip-up 1s 1; animation-delay: 2s; animation-fill-mode: forwards; z-index: 99;
}
.clock-count .down-2 { animation: flip-up 1s 1; animation-delay: 3s; animation-fill-mode: forwards; z-index: 98;
}
.clock-count .down-3 { animation: flip-up 1s 1; animation-delay: 4s; animation-fill-mode: forwards; z-index: 97;
}
.clock-count .down-4 { animation: flip-up 1s 1; animation-delay: 5s; animation-fill-mode: forwards; z-index: 96;
}
.clock-count .down-5 { animation: flip-up 1s 1; animation-delay: 6s; animation-fill-mode: forwards; z-index: 95;
}
.clock-count .down-6 { animation: flip-up 1s 1; animation-delay: 7s; animation-fill-mode: forwards; z-index: 94;
}
.clock-count .down-7 { animation: flip-up 1s 1; animation-delay: 8s; animation-fill-mode: forwards; z-index: 93;
}
.clock-count .down-8 { animation: flip-up 1s 1; animation-delay: 9s; animation-fill-mode: forwards; z-index: 92;
}
.clock-count .down-9 { animation: flip-up 1s 1; animation-delay: 10s; animation-fill-mode: forwards; z-index: 91;
}
.clock-count .down-10 { animation: flip-up 1s 1; animation-delay: 11s; animation-fill-mode: forwards; z-index: 90;
}
.clock-count .down-11 { animation: flip-up 1s 1; animation-delay: 12s; animation-fill-mode: forwards; z-index: 89;
}
.clock-count .down-12 { animation: flip-up 1s 1; animation-delay: 13s; animation-fill-mode: forwards; z-index: 88;
}
.clock-count .down-13 { animation: flip-up 1s 1; animation-delay: 14s; animation-fill-mode: forwards; z-index: 87;
}
.clock-count .down-14 { animation: flip-up 1s 1; animation-delay: 15s; animation-fill-mode: forwards; z-index: 86;
}
.clock-count .down-15 { animation: flip-up 1s 1; animation-delay: 16s; animation-fill-mode: forwards; z-index: 85;
}
.clock-count .down-16 { animation: flip-up 1s 1; animation-delay: 17s; animation-fill-mode: forwards; z-index: 84;
}
.clock-count .down-17 { animation: flip-up 1s 1; animation-delay: 18s; animation-fill-mode: forwards; z-index: 83;
}
.clock-count .down-18 { animation: flip-up 1s 1; animation-delay: 19s; animation-fill-mode: forwards; z-index: 82;
}
.clock-count .down-19 { animation: flip-up 1s 1; animation-delay: 20s; animation-fill-mode: forwards; z-index: 81;
}
.clock-count .down-20 { animation: flip-up 1s 1; animation-delay: 21s; animation-fill-mode: forwards; z-index: 80;
}
.clock-count .down-21 { animation: flip-up 1s 1; animation-delay: 22s; animation-fill-mode: forwards; z-index: 79;
}
.clock-count .down-22 { animation: flip-up 1s 1; animation-delay: 23s; animation-fill-mode: forwards; z-index: 78;
}
.clock-count .down-23 { animation: flip-up 1s 1; animation-delay: 24s; animation-fill-mode: forwards; z-index: 77;
}
.clock-count .down-24 { animation: flip-up 1s 1; animation-delay: 25s; animation-fill-mode: forwards; z-index: 76;
}
.clock-count .down-25 { animation: flip-up 1s 1; animation-delay: 26s; animation-fill-mode: forwards; z-index: 75;
}
.clock-count .down-26 { animation: flip-up 1s 1; animation-delay: 27s; animation-fill-mode: forwards; z-index: 74;
}
.clock-count .down-27 { animation: flip-up 1s 1; animation-delay: 28s; animation-fill-mode: forwards; z-index: 73;
}
.clock-count .down-28 { animation: flip-up 1s 1; animation-delay: 29s; animation-fill-mode: forwards; z-index: 72;
}
.clock-count .down-29 { animation: flip-up 1s 1; animation-delay: 30s; animation-fill-mode: forwards; z-index: 71;
}
.clock-count .down-30 { animation: flip-up 1s 1; animation-delay: 31s; animation-fill-mode: forwards; z-index: 70;
}
.clock-count .down-31 { animation: flip-up 1s 1; animation-delay: 32s; animation-fill-mode: forwards; z-index: 69;
}
.clock-count .down-32 { animation: flip-up 1s 1; animation-delay: 33s; animation-fill-mode: forwards; z-index: 68;
}
.clock-count .down-33 { animation: flip-up 1s 1; animation-delay: 34s; animation-fill-mode: forwards; z-index: 67;
}
.clock-count .down-34 { animation: flip-up 1s 1; animation-delay: 35s; animation-fill-mode: forwards; z-index: 66;
}
.clock-count .down-35 { animation: flip-up 1s 1; animation-delay: 36s; animation-fill-mode: forwards; z-index: 65;
}
.clock-count .down-36 { animation: flip-up 1s 1; animation-delay: 37s; animation-fill-mode: forwards; z-index: 64;
}
.clock-count .down-37 { animation: flip-up 1s 1; animation-delay: 38s; animation-fill-mode: forwards; z-index: 63;
}
.clock-count .down-38 { animation: flip-up 1s 1; animation-delay: 39s; animation-fill-mode: forwards; z-index: 62;
}
.clock-count .down-39 { animation: flip-up 1s 1; animation-delay: 40s; animation-fill-mode: forwards; z-index: 61;
}
.clock-count .down-40 { animation: flip-up 1s 1; animation-delay: 41s; animation-fill-mode: forwards; z-index: 60;
}
.clock-count .down-41 { animation: flip-up 1s 1; animation-delay: 42s; animation-fill-mode: forwards; z-index: 59;
}
.clock-count .down-42 { animation: flip-up 1s 1; animation-delay: 43s; animation-fill-mode: forwards; z-index: 58;
}
.clock-count .down-43 { animation: flip-up 1s 1; animation-delay: 44s; animation-fill-mode: forwards; z-index: 57;
}
.clock-count .down-44 { animation: flip-up 1s 1; animation-delay: 45s; animation-fill-mode: forwards; z-index: 56;
}
.clock-count .down-45 { animation: flip-up 1s 1; animation-delay: 46s; animation-fill-mode: forwards; z-index: 55;
}
.clock-count .down-46 { animation: flip-up 1s 1; animation-delay: 47s; animation-fill-mode: forwards; z-index: 54;
}
.clock-count .down-47 { animation: flip-up 1s 1; animation-delay: 48s; animation-fill-mode: forwards; z-index: 53;
}
.clock-count .down-48 { animation: flip-up 1s 1; animation-delay: 49s; animation-fill-mode: forwards; z-index: 52;
}
.clock-count .down-49 { animation: flip-up 1s 1; animation-delay: 50s; animation-fill-mode: forwards; z-index: 51;
}
.clock-count .down-50 { animation: flip-up 1s 1; animation-delay: 51s; animation-fill-mode: forwards; z-index: 50;
}
.clock-count .down-51 { animation: flip-up 1s 1; animation-delay: 52s; animation-fill-mode: forwards; z-index: 49;
}
.clock-count .down-52 { animation: flip-up 1s 1; animation-delay: 53s; animation-fill-mode: forwards; z-index: 48;
}
.clock-count .down-53 { animation: flip-up 1s 1; animation-delay: 54s; animation-fill-mode: forwards; z-index: 47;
}
.clock-count .down-54 { animation: flip-up 1s 1; animation-delay: 55s; animation-fill-mode: forwards; z-index: 46;
}
.clock-count .down-55 { animation: flip-up 1s 1; animation-delay: 56s; animation-fill-mode: forwards; z-index: 45;
}
.clock-count .down-56 { animation: flip-up 1s 1; animation-delay: 57s; animation-fill-mode: forwards; z-index: 44;
}
.clock-count .down-57 { animation: flip-up 1s 1; animation-delay: 58s; animation-fill-mode: forwards; z-index: 43;
}
.clock-count .down-58 { animation: flip-up 1s 1; animation-delay: 59s; animation-fill-mode: forwards; z-index: 42;
}
@-webkit-keyframes flip-up /* Safari and Chrome */ { from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(1, 0, 0, 180deg); }
}
@-webkit-keyframes flip-up-back /* Safari and Chrome */ { from { transform: rotate3d(-1, 0, 0, 180deg); } to { transform: rotate3d(0, 0, 0, 0deg); }
}
@keyframes flip-up { from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(1, 0, 0, 180deg); }
}
@keyframes flip-up-back { from { transform: rotate3d(-1, 0, 0, 180deg); } to { transform: rotate3d(0, 0, 0, 0deg); }
}
@-webkit-keyframes fade /* Safari and Chrome */ { 0% { opacity: 0; -webkit-filter: blur(2px); } 25% { opacity: 1; -webkit-filter: blur(0px); } 75% { opacity: 1; -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-filter: blur(2px); }
}
@keyframes fade { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='clock clock-count'> <div class='up up-59 gradient-white-gray'>59</div> <div class='down down-59'>59</div> <div class='up up-58 gradient-white-gray'>58</div> <div class='down down-58'>58</div> <div class='up up-57 gradient-white-gray'>57</div> <div class='down down-57'>57</div> <div class='up up-56 gradient-white-gray'>56</div> <div class='down down-56'>56</div> <div class='up up-55 gradient-white-gray'>55</div> <div class='down down-55'>55</div> <div class='up up-54 gradient-white-gray'>54</div> <div class='down down-54'>54</div> <div class='up up-53 gradient-white-gray'>53</div> <div class='down down-53'>53</div> <div class='up up-52 gradient-white-gray'>52</div> <div class='down down-52'>52</div> <div class='up up-51 gradient-white-gray'>51</div> <div class='down down-51'>51</div> <div class='up up-50 gradient-white-gray'>50</div> <div class='down down-50'>50</div> <div class='up up-49 gradient-white-gray'>49</div> <div class='down down-49'>49</div> <div class='up up-48 gradient-white-gray'>48</div> <div class='down down-48'>48</div> <div class='up up-47 gradient-white-gray'>47</div> <div class='down down-47'>47</div> <div class='up up-46 gradient-white-gray'>46</div> <div class='down down-46'>46</div> <div class='up up-45 gradient-white-gray'>45</div> <div class='down down-45'>45</div> <div class='up up-44 gradient-white-gray'>44</div> <div class='down down-44'>44</div> <div class='up up-43 gradient-white-gray'>43</div> <div class='down down-43'>43</div> <div class='up up-42 gradient-white-gray'>42</div> <div class='down down-42'>42</div> <div class='up up-41 gradient-white-gray'>41</div> <div class='down down-41'>41</div> <div class='up up-40 gradient-white-gray'>40</div> <div class='down down-40'>40</div> <div class='up up-39 gradient-white-gray'>39</div> <div class='down down-39'>39</div> <div class='up up-38 gradient-white-gray'>38</div> <div class='down down-38'>38</div> <div class='up up-37 gradient-white-gray'>37</div> <div class='down down-37'>37</div> <div class='up up-36 gradient-white-gray'>36</div> <div class='down down-36'>36</div> <div class='up up-35 gradient-white-gray'>35</div> <div class='down down-35'>35</div> <div class='up up-34 gradient-white-gray'>34</div> <div class='down down-34'>34</div> <div class='up up-33 gradient-white-gray'>33</div> <div class='down down-33'>33</div> <div class='up up-32 gradient-white-gray'>32</div> <div class='down down-32'>32</div> <div class='up up-31 gradient-white-gray'>31</div> <div class='down down-31'>31</div> <div class='up up-30 gradient-white-gray'>30</div> <div class='down down-30'>30</div> <div class='up up-29 gradient-white-gray'>29</div> <div class='down down-29'>29</div> <div class='up up-28 gradient-white-gray'>28</div> <div class='down down-28'>28</div> <div class='up up-27 gradient-white-gray'>27</div> <div class='down down-27'>27</div> <div class='up up-26 gradient-white-gray'>26</div> <div class='down down-26'>26</div> <div class='up up-25 gradient-white-gray'>25</div> <div class='down down-25'>25</div> <div class='up up-24 gradient-white-gray'>24</div> <div class='down down-24'>24</div> <div class='up up-23 gradient-white-gray'>23</div> <div class='down down-23'>23</div> <div class='up up-22 gradient-white-gray'>22</div> <div class='down down-22'>22</div> <div class='up up-21 gradient-white-gray'>21</div> <div class='down down-21'>21</div> <div class='up up-20 gradient-white-gray'>20</div> <div class='down down-20'>20</div> <div class='up up-19 gradient-white-gray'>19</div> <div class='down down-19'>19</div> <div class='up up-18 gradient-white-gray'>18</div> <div class='down down-18'>18</div> <div class='up up-17 gradient-white-gray'>17</div> <div class='down down-17'>17</div> <div class='up up-16 gradient-white-gray'>16</div> <div class='down down-16'>16</div> <div class='up up-15 gradient-white-gray'>15</div> <div class='down down-15'>15</div> <div class='up up-14 gradient-white-gray'>14</div> <div class='down down-14'>14</div> <div class='up up-13 gradient-white-gray'>13</div> <div class='down down-13'>13</div> <div class='up up-12 gradient-white-gray'>12</div> <div class='down down-12'>12</div> <div class='up up-11 gradient-white-gray'>11</div> <div class='down down-11'>11</div> <div class='up up-10 gradient-white-gray'>10</div> <div class='down down-10'>10</div> <div class='up up-9 gradient-white-gray'>9</div> <div class='down down-9'>9</div> <div class='up up-8 gradient-white-gray'>8</div> <div class='down down-8'>8</div> <div class='up up-7 gradient-white-gray'>7</div> <div class='down down-7'>7</div> <div class='up up-6 gradient-white-gray'>6</div> <div class='down down-6'>6</div> <div class='up up-5 gradient-white-gray'>5</div> <div class='down down-5'>5</div> <div class='up up-4 gradient-white-gray'>4</div> <div class='down down-4'>4</div> <div class='up up-3 gradient-white-gray'>3</div> <div class='down down-3'>3</div> <div class='up up-2 gradient-white-gray'>2</div> <div class='down down-2'>2</div> <div class='up up-1 gradient-white-gray'>1</div> <div class='down down-1'>1</div> <div class='up up-0 gradient-white-gray'>0</div> <div class='down down-0'>0</div>
</div>
<div class='clock clock-reverse'> <div class='up up-0 gradient-white-gray'>0</div> <div class='down down-0'>0</div> <div class='up up-1 gradient-white-gray'>1</div> <div class='down down-1'>1</div> <div class='up up-2 gradient-white-gray'>2</div> <div class='down down-2'>2</div> <div class='up up-3 gradient-white-gray'>3</div> <div class='down down-3'>3</div> <div class='up up-4 gradient-white-gray'>4</div> <div class='down down-4'>4</div> <div class='up up-5 gradient-white-gray'>5</div> <div class='down down-5'>5</div> <div class='up up-6 gradient-white-gray'>6</div> <div class='down down-6'>6</div> <div class='up up-7 gradient-white-gray'>7</div> <div class='down down-7'>7</div> <div class='up up-8 gradient-white-gray'>8</div> <div class='down down-8'>8</div> <div class='up up-9 gradient-white-gray'>9</div> <div class='down down-9'>9</div> <div class='up up-10 gradient-white-gray'>10</div> <div class='down down-10'>10</div> <div class='up up-11 gradient-white-gray'>11</div> <div class='down down-11'>11</div> <div class='up up-12 gradient-white-gray'>12</div> <div class='down down-12'>12</div> <div class='up up-13 gradient-white-gray'>13</div> <div class='down down-13'>13</div> <div class='up up-14 gradient-white-gray'>14</div> <div class='down down-14'>14</div> <div class='up up-15 gradient-white-gray'>15</div> <div class='down down-15'>15</div> <div class='up up-16 gradient-white-gray'>16</div> <div class='down down-16'>16</div> <div class='up up-17 gradient-white-gray'>17</div> <div class='down down-17'>17</div> <div class='up up-18 gradient-white-gray'>18</div> <div class='down down-18'>18</div> <div class='up up-19 gradient-white-gray'>19</div> <div class='down down-19'>19</div> <div class='up up-20 gradient-white-gray'>20</div> <div class='down down-20'>20</div> <div class='up up-21 gradient-white-gray'>21</div> <div class='down down-21'>21</div> <div class='up up-22 gradient-white-gray'>22</div> <div class='down down-22'>22</div> <div class='up up-23 gradient-white-gray'>23</div> <div class='down down-23'>23</div> <div class='up up-24 gradient-white-gray'>24</div> <div class='down down-24'>24</div> <div class='up up-25 gradient-white-gray'>25</div> <div class='down down-25'>25</div> <div class='up up-26 gradient-white-gray'>26</div> <div class='down down-26'>26</div> <div class='up up-27 gradient-white-gray'>27</div> <div class='down down-27'>27</div> <div class='up up-28 gradient-white-gray'>28</div> <div class='down down-28'>28</div> <div class='up up-29 gradient-white-gray'>29</div> <div class='down down-29'>29</div> <div class='up up-30 gradient-white-gray'>30</div> <div class='down down-30'>30</div> <div class='up up-31 gradient-white-gray'>31</div> <div class='down down-31'>31</div> <div class='up up-32 gradient-white-gray'>32</div> <div class='down down-32'>32</div> <div class='up up-33 gradient-white-gray'>33</div> <div class='down down-33'>33</div> <div class='up up-34 gradient-white-gray'>34</div> <div class='down down-34'>34</div> <div class='up up-35 gradient-white-gray'>35</div> <div class='down down-35'>35</div> <div class='up up-36 gradient-white-gray'>36</div> <div class='down down-36'>36</div> <div class='up up-37 gradient-white-gray'>37</div> <div class='down down-37'>37</div> <div class='up up-38 gradient-white-gray'>38</div> <div class='down down-38'>38</div> <div class='up up-39 gradient-white-gray'>39</div> <div class='down down-39'>39</div> <div class='up up-40 gradient-white-gray'>40</div> <div class='down down-40'>40</div> <div class='up up-41 gradient-white-gray'>41</div> <div class='down down-41'>41</div> <div class='up up-42 gradient-white-gray'>42</div> <div class='down down-42'>42</div> <div class='up up-43 gradient-white-gray'>43</div> <div class='down down-43'>43</div> <div class='up up-44 gradient-white-gray'>44</div> <div class='down down-44'>44</div> <div class='up up-45 gradient-white-gray'>45</div> <div class='down down-45'>45</div> <div class='up up-46 gradient-white-gray'>46</div> <div class='down down-46'>46</div> <div class='up up-47 gradient-white-gray'>47</div> <div class='down down-47'>47</div> <div class='up up-48 gradient-white-gray'>48</div> <div class='down down-48'>48</div> <div class='up up-49 gradient-white-gray'>49</div> <div class='down down-49'>49</div> <div class='up up-50 gradient-white-gray'>50</div> <div class='down down-50'>50</div> <div class='up up-51 gradient-white-gray'>51</div> <div class='down down-51'>51</div> <div class='up up-52 gradient-white-gray'>52</div> <div class='down down-52'>52</div> <div class='up up-53 gradient-white-gray'>53</div> <div class='down down-53'>53</div> <div class='up up-54 gradient-white-gray'>54</div> <div class='down down-54'>54</div> <div class='up up-55 gradient-white-gray'>55</div> <div class='down down-55'>55</div> <div class='up up-56 gradient-white-gray'>56</div> <div class='down down-56'>56</div> <div class='up up-57 gradient-white-gray'>57</div> <div class='down down-57'>57</div> <div class='up up-58 gradient-white-gray'>58</div> <div class='down down-58'>58</div> <div class='up up-59 gradient-white-gray'>59</div> <div class='down down-59'>59</div>
</div>
<div class='clock clock-fade'> <div class='tick tick-0'>0</div> <div class='tick tick-1'>1</div> <div class='tick tick-2'>2</div> <div class='tick tick-3'>3</div> <div class='tick tick-4'>4</div> <div class='tick tick-5'>5</div> <div class='tick tick-6'>6</div> <div class='tick tick-7'>7</div> <div class='tick tick-8'>8</div> <div class='tick tick-9'>9</div> <div class='tick tick-10'>10</div> <div class='tick tick-11'>11</div> <div class='tick tick-12'>12</div> <div class='tick tick-13'>13</div> <div class='tick tick-14'>14</div> <div class='tick tick-15'>15</div> <div class='tick tick-16'>16</div> <div class='tick tick-17'>17</div> <div class='tick tick-18'>18</div> <div class='tick tick-19'>19</div> <div class='tick tick-20'>20</div> <div class='tick tick-21'>21</div> <div class='tick tick-22'>22</div> <div class='tick tick-23'>23</div> <div class='tick tick-24'>24</div> <div class='tick tick-25'>25</div> <div class='tick tick-26'>26</div> <div class='tick tick-27'>27</div> <div class='tick tick-28'>28</div> <div class='tick tick-29'>29</div> <div class='tick tick-30'>30</div> <div class='tick tick-31'>31</div> <div class='tick tick-32'>32</div> <div class='tick tick-33'>33</div> <div class='tick tick-34'>34</div> <div class='tick tick-35'>35</div> <div class='tick tick-36'>36</div> <div class='tick tick-37'>37</div> <div class='tick tick-38'>38</div> <div class='tick tick-39'>39</div> <div class='tick tick-40'>40</div> <div class='tick tick-41'>41</div> <div class='tick tick-42'>42</div> <div class='tick tick-43'>43</div> <div class='tick tick-44'>44</div> <div class='tick tick-45'>45</div> <div class='tick tick-46'>46</div> <div class='tick tick-47'>47</div> <div class='tick tick-48'>48</div> <div class='tick tick-49'>49</div> <div class='tick tick-50'>50</div> <div class='tick tick-51'>51</div> <div class='tick tick-52'>52</div> <div class='tick tick-53'>53</div> <div class='tick tick-54'>54</div> <div class='tick tick-55'>55</div> <div class='tick tick-56'>56</div> <div class='tick tick-57'>57</div> <div class='tick tick-58'>58</div> <div class='tick tick-59'>59</div>
</div>
<h1>Flat CSS-only countdown and countup</h1> <script src="js/index.js"></script>
</body>
</html>

Flat css-only countdown and countup - Script Codes CSS Codes

* { box-sizing: border-box;
}
.gradient-white-gray { background: linear-gradient(to bottom, #000000 0%, #111111 100%); /* W3C */
}
body { background: #e74c3c;
}
h1 { padding: 20px 50px; color: #c0392b; font-size: 48px; background: black;
}
.clock { display: inline-block; vertical-align: top; color: #E74C3C; margin: 40px 50px; box-shadow: 4px 4px 0 4px #FFF, 8px 8px 0 8px #c0392b;
}
.clock .up, .clock .down { left: 0; right: 0; text-align: center; overflow: hidden; position: absolute; backface-visibility: hidden; animation-fill-mode: forwards;
}
.clock .up { top: 0; bottom: 50%; transform-origin: 50% 100%;
}
.clock .down { top: 50%; bottom: 0; background: black; transform-origin: 50% 0%; line-height: 0px;
}
.clock-fade { width: 100px; height: 50px; background: black; position: relative; padding: 5px;
}
.clock-fade .tick { position: absolute; top: 0; bottom: 0; left: 0; right: 0; font-size: 50px; text-align: center; line-height: 47.5px; background: black;
}
.clock-fade .tick-59 { animation: fade 2s 1; animation-delay: -1s; animation-fill-mode: forwards;
}
.clock-fade .tick-58 { animation: fade 2s 1; animation-delay: 0s; animation-fill-mode: forwards;
}
.clock-fade .tick-57 { animation: fade 2s 1; animation-delay: 1s; animation-fill-mode: forwards;
}
.clock-fade .tick-56 { animation: fade 2s 1; animation-delay: 2s; animation-fill-mode: forwards;
}
.clock-fade .tick-55 { animation: fade 2s 1; animation-delay: 3s; animation-fill-mode: forwards;
}
.clock-fade .tick-54 { animation: fade 2s 1; animation-delay: 4s; animation-fill-mode: forwards;
}
.clock-fade .tick-53 { animation: fade 2s 1; animation-delay: 5s; animation-fill-mode: forwards;
}
.clock-fade .tick-52 { animation: fade 2s 1; animation-delay: 6s; animation-fill-mode: forwards;
}
.clock-fade .tick-51 { animation: fade 2s 1; animation-delay: 7s; animation-fill-mode: forwards;
}
.clock-fade .tick-50 { animation: fade 2s 1; animation-delay: 8s; animation-fill-mode: forwards;
}
.clock-fade .tick-49 { animation: fade 2s 1; animation-delay: 9s; animation-fill-mode: forwards;
}
.clock-fade .tick-48 { animation: fade 2s 1; animation-delay: 10s; animation-fill-mode: forwards;
}
.clock-fade .tick-47 { animation: fade 2s 1; animation-delay: 11s; animation-fill-mode: forwards;
}
.clock-fade .tick-46 { animation: fade 2s 1; animation-delay: 12s; animation-fill-mode: forwards;
}
.clock-fade .tick-45 { animation: fade 2s 1; animation-delay: 13s; animation-fill-mode: forwards;
}
.clock-fade .tick-44 { animation: fade 2s 1; animation-delay: 14s; animation-fill-mode: forwards;
}
.clock-fade .tick-43 { animation: fade 2s 1; animation-delay: 15s; animation-fill-mode: forwards;
}
.clock-fade .tick-42 { animation: fade 2s 1; animation-delay: 16s; animation-fill-mode: forwards;
}
.clock-fade .tick-41 { animation: fade 2s 1; animation-delay: 17s; animation-fill-mode: forwards;
}
.clock-fade .tick-40 { animation: fade 2s 1; animation-delay: 18s; animation-fill-mode: forwards;
}
.clock-fade .tick-39 { animation: fade 2s 1; animation-delay: 19s; animation-fill-mode: forwards;
}
.clock-fade .tick-38 { animation: fade 2s 1; animation-delay: 20s; animation-fill-mode: forwards;
}
.clock-fade .tick-37 { animation: fade 2s 1; animation-delay: 21s; animation-fill-mode: forwards;
}
.clock-fade .tick-36 { animation: fade 2s 1; animation-delay: 22s; animation-fill-mode: forwards;
}
.clock-fade .tick-35 { animation: fade 2s 1; animation-delay: 23s; animation-fill-mode: forwards;
}
.clock-fade .tick-34 { animation: fade 2s 1; animation-delay: 24s; animation-fill-mode: forwards;
}
.clock-fade .tick-33 { animation: fade 2s 1; animation-delay: 25s; animation-fill-mode: forwards;
}
.clock-fade .tick-32 { animation: fade 2s 1; animation-delay: 26s; animation-fill-mode: forwards;
}
.clock-fade .tick-31 { animation: fade 2s 1; animation-delay: 27s; animation-fill-mode: forwards;
}
.clock-fade .tick-30 { animation: fade 2s 1; animation-delay: 28s; animation-fill-mode: forwards;
}
.clock-fade .tick-29 { animation: fade 2s 1; animation-delay: 29s; animation-fill-mode: forwards;
}
.clock-fade .tick-28 { animation: fade 2s 1; animation-delay: 30s; animation-fill-mode: forwards;
}
.clock-fade .tick-27 { animation: fade 2s 1; animation-delay: 31s; animation-fill-mode: forwards;
}
.clock-fade .tick-26 { animation: fade 2s 1; animation-delay: 32s; animation-fill-mode: forwards;
}
.clock-fade .tick-25 { animation: fade 2s 1; animation-delay: 33s; animation-fill-mode: forwards;
}
.clock-fade .tick-24 { animation: fade 2s 1; animation-delay: 34s; animation-fill-mode: forwards;
}
.clock-fade .tick-23 { animation: fade 2s 1; animation-delay: 35s; animation-fill-mode: forwards;
}
.clock-fade .tick-22 { animation: fade 2s 1; animation-delay: 36s; animation-fill-mode: forwards;
}
.clock-fade .tick-21 { animation: fade 2s 1; animation-delay: 37s; animation-fill-mode: forwards;
}
.clock-fade .tick-20 { animation: fade 2s 1; animation-delay: 38s; animation-fill-mode: forwards;
}
.clock-fade .tick-19 { animation: fade 2s 1; animation-delay: 39s; animation-fill-mode: forwards;
}
.clock-fade .tick-18 { animation: fade 2s 1; animation-delay: 40s; animation-fill-mode: forwards;
}
.clock-fade .tick-17 { animation: fade 2s 1; animation-delay: 41s; animation-fill-mode: forwards;
}
.clock-fade .tick-16 { animation: fade 2s 1; animation-delay: 42s; animation-fill-mode: forwards;
}
.clock-fade .tick-15 { animation: fade 2s 1; animation-delay: 43s; animation-fill-mode: forwards;
}
.clock-fade .tick-14 { animation: fade 2s 1; animation-delay: 44s; animation-fill-mode: forwards;
}
.clock-fade .tick-13 { animation: fade 2s 1; animation-delay: 45s; animation-fill-mode: forwards;
}
.clock-fade .tick-12 { animation: fade 2s 1; animation-delay: 46s; animation-fill-mode: forwards;
}
.clock-fade .tick-11 { animation: fade 2s 1; animation-delay: 47s; animation-fill-mode: forwards;
}
.clock-fade .tick-10 { animation: fade 2s 1; animation-delay: 48s; animation-fill-mode: forwards;
}
.clock-fade .tick-9 { animation: fade 2s 1; animation-delay: 49s; animation-fill-mode: forwards;
}
.clock-fade .tick-8 { animation: fade 2s 1; animation-delay: 50s; animation-fill-mode: forwards;
}
.clock-fade .tick-7 { animation: fade 2s 1; animation-delay: 51s; animation-fill-mode: forwards;
}
.clock-fade .tick-6 { animation: fade 2s 1; animation-delay: 52s; animation-fill-mode: forwards;
}
.clock-fade .tick-5 { animation: fade 2s 1; animation-delay: 53s; animation-fill-mode: forwards;
}
.clock-fade .tick-4 { animation: fade 2s 1; animation-delay: 54s; animation-fill-mode: forwards;
}
.clock-fade .tick-3 { animation: fade 2s 1; animation-delay: 55s; animation-fill-mode: forwards;
}
.clock-fade .tick-2 { animation: fade 2s 1; animation-delay: 56s; animation-fill-mode: forwards;
}
.clock-fade .tick-1 { animation: fade 2s 1; animation-delay: 57s; animation-fill-mode: forwards;
}
.clock-fade .tick-0 { animation: fade 2s 1; animation-delay: 58s; animation-fill-mode: forwards;
}
.clock-reverse { width: 200px; height: 100px; background: black; position: relative; padding: 10px; perspective: 1000px;
}
.clock-reverse .up, .clock-reverse .down { font-size: 90px;
}
.clock-reverse .up { line-height: 100px;
}
.clock-reverse .up-59 { animation: flip-up 1s 1; animation-delay: 0s; animation-fill-mode: forwards; z-index: 59;
}
.clock-reverse .up-58 { animation: flip-up 1s 1; animation-delay: 1s; animation-fill-mode: forwards; z-index: 58;
}
.clock-reverse .up-57 { animation: flip-up 1s 1; animation-delay: 2s; animation-fill-mode: forwards; z-index: 57;
}
.clock-reverse .up-56 { animation: flip-up 1s 1; animation-delay: 3s; animation-fill-mode: forwards; z-index: 56;
}
.clock-reverse .up-55 { animation: flip-up 1s 1; animation-delay: 4s; animation-fill-mode: forwards; z-index: 55;
}
.clock-reverse .up-54 { animation: flip-up 1s 1; animation-delay: 5s; animation-fill-mode: forwards; z-index: 54;
}
.clock-reverse .up-53 { animation: flip-up 1s 1; animation-delay: 6s; animation-fill-mode: forwards; z-index: 53;
}
.clock-reverse .up-52 { animation: flip-up 1s 1; animation-delay: 7s; animation-fill-mode: forwards; z-index: 52;
}
.clock-reverse .up-51 { animation: flip-up 1s 1; animation-delay: 8s; animation-fill-mode: forwards; z-index: 51;
}
.clock-reverse .up-50 { animation: flip-up 1s 1; animation-delay: 9s; animation-fill-mode: forwards; z-index: 50;
}
.clock-reverse .up-49 { animation: flip-up 1s 1; animation-delay: 10s; animation-fill-mode: forwards; z-index: 49;
}
.clock-reverse .up-48 { animation: flip-up 1s 1; animation-delay: 11s; animation-fill-mode: forwards; z-index: 48;
}
.clock-reverse .up-47 { animation: flip-up 1s 1; animation-delay: 12s; animation-fill-mode: forwards; z-index: 47;
}
.clock-reverse .up-46 { animation: flip-up 1s 1; animation-delay: 13s; animation-fill-mode: forwards; z-index: 46;
}
.clock-reverse .up-45 { animation: flip-up 1s 1; animation-delay: 14s; animation-fill-mode: forwards; z-index: 45;
}
.clock-reverse .up-44 { animation: flip-up 1s 1; animation-delay: 15s; animation-fill-mode: forwards; z-index: 44;
}
.clock-reverse .up-43 { animation: flip-up 1s 1; animation-delay: 16s; animation-fill-mode: forwards; z-index: 43;
}
.clock-reverse .up-42 { animation: flip-up 1s 1; animation-delay: 17s; animation-fill-mode: forwards; z-index: 42;
}
.clock-reverse .up-41 { animation: flip-up 1s 1; animation-delay: 18s; animation-fill-mode: forwards; z-index: 41;
}
.clock-reverse .up-40 { animation: flip-up 1s 1; animation-delay: 19s; animation-fill-mode: forwards; z-index: 40;
}
.clock-reverse .up-39 { animation: flip-up 1s 1; animation-delay: 20s; animation-fill-mode: forwards; z-index: 39;
}
.clock-reverse .up-38 { animation: flip-up 1s 1; animation-delay: 21s; animation-fill-mode: forwards; z-index: 38;
}
.clock-reverse .up-37 { animation: flip-up 1s 1; animation-delay: 22s; animation-fill-mode: forwards; z-index: 37;
}
.clock-reverse .up-36 { animation: flip-up 1s 1; animation-delay: 23s; animation-fill-mode: forwards; z-index: 36;
}
.clock-reverse .up-35 { animation: flip-up 1s 1; animation-delay: 24s; animation-fill-mode: forwards; z-index: 35;
}
.clock-reverse .up-34 { animation: flip-up 1s 1; animation-delay: 25s; animation-fill-mode: forwards; z-index: 34;
}
.clock-reverse .up-33 { animation: flip-up 1s 1; animation-delay: 26s; animation-fill-mode: forwards; z-index: 33;
}
.clock-reverse .up-32 { animation: flip-up 1s 1; animation-delay: 27s; animation-fill-mode: forwards; z-index: 32;
}
.clock-reverse .up-31 { animation: flip-up 1s 1; animation-delay: 28s; animation-fill-mode: forwards; z-index: 31;
}
.clock-reverse .up-30 { animation: flip-up 1s 1; animation-delay: 29s; animation-fill-mode: forwards; z-index: 30;
}
.clock-reverse .up-29 { animation: flip-up 1s 1; animation-delay: 30s; animation-fill-mode: forwards; z-index: 29;
}
.clock-reverse .up-28 { animation: flip-up 1s 1; animation-delay: 31s; animation-fill-mode: forwards; z-index: 28;
}
.clock-reverse .up-27 { animation: flip-up 1s 1; animation-delay: 32s; animation-fill-mode: forwards; z-index: 27;
}
.clock-reverse .up-26 { animation: flip-up 1s 1; animation-delay: 33s; animation-fill-mode: forwards; z-index: 26;
}
.clock-reverse .up-25 { animation: flip-up 1s 1; animation-delay: 34s; animation-fill-mode: forwards; z-index: 25;
}
.clock-reverse .up-24 { animation: flip-up 1s 1; animation-delay: 35s; animation-fill-mode: forwards; z-index: 24;
}
.clock-reverse .up-23 { animation: flip-up 1s 1; animation-delay: 36s; animation-fill-mode: forwards; z-index: 23;
}
.clock-reverse .up-22 { animation: flip-up 1s 1; animation-delay: 37s; animation-fill-mode: forwards; z-index: 22;
}
.clock-reverse .up-21 { animation: flip-up 1s 1; animation-delay: 38s; animation-fill-mode: forwards; z-index: 21;
}
.clock-reverse .up-20 { animation: flip-up 1s 1; animation-delay: 39s; animation-fill-mode: forwards; z-index: 20;
}
.clock-reverse .up-19 { animation: flip-up 1s 1; animation-delay: 40s; animation-fill-mode: forwards; z-index: 19;
}
.clock-reverse .up-18 { animation: flip-up 1s 1; animation-delay: 41s; animation-fill-mode: forwards; z-index: 18;
}
.clock-reverse .up-17 { animation: flip-up 1s 1; animation-delay: 42s; animation-fill-mode: forwards; z-index: 17;
}
.clock-reverse .up-16 { animation: flip-up 1s 1; animation-delay: 43s; animation-fill-mode: forwards; z-index: 16;
}
.clock-reverse .up-15 { animation: flip-up 1s 1; animation-delay: 44s; animation-fill-mode: forwards; z-index: 15;
}
.clock-reverse .up-14 { animation: flip-up 1s 1; animation-delay: 45s; animation-fill-mode: forwards; z-index: 14;
}
.clock-reverse .up-13 { animation: flip-up 1s 1; animation-delay: 46s; animation-fill-mode: forwards; z-index: 13;
}
.clock-reverse .up-12 { animation: flip-up 1s 1; animation-delay: 47s; animation-fill-mode: forwards; z-index: 12;
}
.clock-reverse .up-11 { animation: flip-up 1s 1; animation-delay: 48s; animation-fill-mode: forwards; z-index: 11;
}
.clock-reverse .up-10 { animation: flip-up 1s 1; animation-delay: 49s; animation-fill-mode: forwards; z-index: 10;
}
.clock-reverse .up-9 { animation: flip-up 1s 1; animation-delay: 50s; animation-fill-mode: forwards; z-index: 9;
}
.clock-reverse .up-8 { animation: flip-up 1s 1; animation-delay: 51s; animation-fill-mode: forwards; z-index: 8;
}
.clock-reverse .up-7 { animation: flip-up 1s 1; animation-delay: 52s; animation-fill-mode: forwards; z-index: 7;
}
.clock-reverse .up-6 { animation: flip-up 1s 1; animation-delay: 53s; animation-fill-mode: forwards; z-index: 6;
}
.clock-reverse .up-5 { animation: flip-up 1s 1; animation-delay: 54s; animation-fill-mode: forwards; z-index: 5;
}
.clock-reverse .up-4 { animation: flip-up 1s 1; animation-delay: 55s; animation-fill-mode: forwards; z-index: 4;
}
.clock-reverse .up-3 { animation: flip-up 1s 1; animation-delay: 56s; animation-fill-mode: forwards; z-index: 3;
}
.clock-reverse .up-2 { animation: flip-up 1s 1; animation-delay: 57s; animation-fill-mode: forwards; z-index: 2;
}
.clock-reverse .up-1 { animation: flip-up 1s 1; animation-delay: 58s; animation-fill-mode: forwards; z-index: 1;
}
.clock-reverse .down-59 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: -1s; animation-fill-mode: forwards; z-index: 0;
}
.clock-reverse .down-58 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 0s; animation-fill-mode: forwards; z-index: 1;
}
.clock-reverse .down-57 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 1s; animation-fill-mode: forwards; z-index: 2;
}
.clock-reverse .down-56 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 2s; animation-fill-mode: forwards; z-index: 3;
}
.clock-reverse .down-55 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 3s; animation-fill-mode: forwards; z-index: 4;
}
.clock-reverse .down-54 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 4s; animation-fill-mode: forwards; z-index: 5;
}
.clock-reverse .down-53 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 5s; animation-fill-mode: forwards; z-index: 6;
}
.clock-reverse .down-52 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 6s; animation-fill-mode: forwards; z-index: 7;
}
.clock-reverse .down-51 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 7s; animation-fill-mode: forwards; z-index: 8;
}
.clock-reverse .down-50 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 8s; animation-fill-mode: forwards; z-index: 9;
}
.clock-reverse .down-49 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 9s; animation-fill-mode: forwards; z-index: 10;
}
.clock-reverse .down-48 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 10s; animation-fill-mode: forwards; z-index: 11;
}
.clock-reverse .down-47 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 11s; animation-fill-mode: forwards; z-index: 12;
}
.clock-reverse .down-46 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 12s; animation-fill-mode: forwards; z-index: 13;
}
.clock-reverse .down-45 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 13s; animation-fill-mode: forwards; z-index: 14;
}
.clock-reverse .down-44 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 14s; animation-fill-mode: forwards; z-index: 15;
}
.clock-reverse .down-43 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 15s; animation-fill-mode: forwards; z-index: 16;
}
.clock-reverse .down-42 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 16s; animation-fill-mode: forwards; z-index: 17;
}
.clock-reverse .down-41 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 17s; animation-fill-mode: forwards; z-index: 18;
}
.clock-reverse .down-40 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 18s; animation-fill-mode: forwards; z-index: 19;
}
.clock-reverse .down-39 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 19s; animation-fill-mode: forwards; z-index: 20;
}
.clock-reverse .down-38 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 20s; animation-fill-mode: forwards; z-index: 21;
}
.clock-reverse .down-37 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 21s; animation-fill-mode: forwards; z-index: 22;
}
.clock-reverse .down-36 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 22s; animation-fill-mode: forwards; z-index: 23;
}
.clock-reverse .down-35 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 23s; animation-fill-mode: forwards; z-index: 24;
}
.clock-reverse .down-34 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 24s; animation-fill-mode: forwards; z-index: 25;
}
.clock-reverse .down-33 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 25s; animation-fill-mode: forwards; z-index: 26;
}
.clock-reverse .down-32 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 26s; animation-fill-mode: forwards; z-index: 27;
}
.clock-reverse .down-31 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 27s; animation-fill-mode: forwards; z-index: 28;
}
.clock-reverse .down-30 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 28s; animation-fill-mode: forwards; z-index: 29;
}
.clock-reverse .down-29 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 29s; animation-fill-mode: forwards; z-index: 30;
}
.clock-reverse .down-28 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 30s; animation-fill-mode: forwards; z-index: 31;
}
.clock-reverse .down-27 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 31s; animation-fill-mode: forwards; z-index: 32;
}
.clock-reverse .down-26 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 32s; animation-fill-mode: forwards; z-index: 33;
}
.clock-reverse .down-25 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 33s; animation-fill-mode: forwards; z-index: 34;
}
.clock-reverse .down-24 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 34s; animation-fill-mode: forwards; z-index: 35;
}
.clock-reverse .down-23 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 35s; animation-fill-mode: forwards; z-index: 36;
}
.clock-reverse .down-22 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 36s; animation-fill-mode: forwards; z-index: 37;
}
.clock-reverse .down-21 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 37s; animation-fill-mode: forwards; z-index: 38;
}
.clock-reverse .down-20 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 38s; animation-fill-mode: forwards; z-index: 39;
}
.clock-reverse .down-19 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 39s; animation-fill-mode: forwards; z-index: 40;
}
.clock-reverse .down-18 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 40s; animation-fill-mode: forwards; z-index: 41;
}
.clock-reverse .down-17 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 41s; animation-fill-mode: forwards; z-index: 42;
}
.clock-reverse .down-16 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 42s; animation-fill-mode: forwards; z-index: 43;
}
.clock-reverse .down-15 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 43s; animation-fill-mode: forwards; z-index: 44;
}
.clock-reverse .down-14 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 44s; animation-fill-mode: forwards; z-index: 45;
}
.clock-reverse .down-13 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 45s; animation-fill-mode: forwards; z-index: 46;
}
.clock-reverse .down-12 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 46s; animation-fill-mode: forwards; z-index: 47;
}
.clock-reverse .down-11 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 47s; animation-fill-mode: forwards; z-index: 48;
}
.clock-reverse .down-10 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 48s; animation-fill-mode: forwards; z-index: 49;
}
.clock-reverse .down-9 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 49s; animation-fill-mode: forwards; z-index: 50;
}
.clock-reverse .down-8 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 50s; animation-fill-mode: forwards; z-index: 51;
}
.clock-reverse .down-7 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 51s; animation-fill-mode: forwards; z-index: 52;
}
.clock-reverse .down-6 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 52s; animation-fill-mode: forwards; z-index: 53;
}
.clock-reverse .down-5 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 53s; animation-fill-mode: forwards; z-index: 54;
}
.clock-reverse .down-4 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 54s; animation-fill-mode: forwards; z-index: 55;
}
.clock-reverse .down-3 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 55s; animation-fill-mode: forwards; z-index: 56;
}
.clock-reverse .down-2 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 56s; animation-fill-mode: forwards; z-index: 57;
}
.clock-reverse .down-1 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 57s; animation-fill-mode: forwards; z-index: 58;
}
.clock-reverse .down-0 { animation: flip-up-back 1s 1; transform: rotate3d(-1, 0, 0, 180deg); animation-delay: 58s; animation-fill-mode: forwards; z-index: 59;
}
.clock-count { width: 500px; height: 250px; background: black; position: relative; padding: 20px; perspective: 1000px;
}
.clock-count .up, .clock-count .down { font-size: 230px;
}
.clock-count .up { line-height: 250px;
}
.clock-count .up-1 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 1s; animation-fill-mode: forwards; z-index: 1;
}
.clock-count .up-2 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 2s; animation-fill-mode: forwards; z-index: 2;
}
.clock-count .up-3 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 3s; animation-fill-mode: forwards; z-index: 3;
}
.clock-count .up-4 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 4s; animation-fill-mode: forwards; z-index: 4;
}
.clock-count .up-5 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 5s; animation-fill-mode: forwards; z-index: 5;
}
.clock-count .up-6 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 6s; animation-fill-mode: forwards; z-index: 6;
}
.clock-count .up-7 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 7s; animation-fill-mode: forwards; z-index: 7;
}
.clock-count .up-8 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 8s; animation-fill-mode: forwards; z-index: 8;
}
.clock-count .up-9 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 9s; animation-fill-mode: forwards; z-index: 9;
}
.clock-count .up-10 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 10s; animation-fill-mode: forwards; z-index: 10;
}
.clock-count .up-11 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 11s; animation-fill-mode: forwards; z-index: 11;
}
.clock-count .up-12 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 12s; animation-fill-mode: forwards; z-index: 12;
}
.clock-count .up-13 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 13s; animation-fill-mode: forwards; z-index: 13;
}
.clock-count .up-14 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 14s; animation-fill-mode: forwards; z-index: 14;
}
.clock-count .up-15 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 15s; animation-fill-mode: forwards; z-index: 15;
}
.clock-count .up-16 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 16s; animation-fill-mode: forwards; z-index: 16;
}
.clock-count .up-17 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 17s; animation-fill-mode: forwards; z-index: 17;
}
.clock-count .up-18 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 18s; animation-fill-mode: forwards; z-index: 18;
}
.clock-count .up-19 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 19s; animation-fill-mode: forwards; z-index: 19;
}
.clock-count .up-20 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 20s; animation-fill-mode: forwards; z-index: 20;
}
.clock-count .up-21 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 21s; animation-fill-mode: forwards; z-index: 21;
}
.clock-count .up-22 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 22s; animation-fill-mode: forwards; z-index: 22;
}
.clock-count .up-23 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 23s; animation-fill-mode: forwards; z-index: 23;
}
.clock-count .up-24 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 24s; animation-fill-mode: forwards; z-index: 24;
}
.clock-count .up-25 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 25s; animation-fill-mode: forwards; z-index: 25;
}
.clock-count .up-26 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 26s; animation-fill-mode: forwards; z-index: 26;
}
.clock-count .up-27 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 27s; animation-fill-mode: forwards; z-index: 27;
}
.clock-count .up-28 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 28s; animation-fill-mode: forwards; z-index: 28;
}
.clock-count .up-29 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 29s; animation-fill-mode: forwards; z-index: 29;
}
.clock-count .up-30 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 30s; animation-fill-mode: forwards; z-index: 30;
}
.clock-count .up-31 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 31s; animation-fill-mode: forwards; z-index: 31;
}
.clock-count .up-32 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 32s; animation-fill-mode: forwards; z-index: 32;
}
.clock-count .up-33 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 33s; animation-fill-mode: forwards; z-index: 33;
}
.clock-count .up-34 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 34s; animation-fill-mode: forwards; z-index: 34;
}
.clock-count .up-35 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 35s; animation-fill-mode: forwards; z-index: 35;
}
.clock-count .up-36 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 36s; animation-fill-mode: forwards; z-index: 36;
}
.clock-count .up-37 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 37s; animation-fill-mode: forwards; z-index: 37;
}
.clock-count .up-38 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 38s; animation-fill-mode: forwards; z-index: 38;
}
.clock-count .up-39 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 39s; animation-fill-mode: forwards; z-index: 39;
}
.clock-count .up-40 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 40s; animation-fill-mode: forwards; z-index: 40;
}
.clock-count .up-41 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 41s; animation-fill-mode: forwards; z-index: 41;
}
.clock-count .up-42 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 42s; animation-fill-mode: forwards; z-index: 42;
}
.clock-count .up-43 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 43s; animation-fill-mode: forwards; z-index: 43;
}
.clock-count .up-44 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 44s; animation-fill-mode: forwards; z-index: 44;
}
.clock-count .up-45 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 45s; animation-fill-mode: forwards; z-index: 45;
}
.clock-count .up-46 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 46s; animation-fill-mode: forwards; z-index: 46;
}
.clock-count .up-47 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 47s; animation-fill-mode: forwards; z-index: 47;
}
.clock-count .up-48 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 48s; animation-fill-mode: forwards; z-index: 48;
}
.clock-count .up-49 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 49s; animation-fill-mode: forwards; z-index: 49;
}
.clock-count .up-50 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 50s; animation-fill-mode: forwards; z-index: 50;
}
.clock-count .up-51 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 51s; animation-fill-mode: forwards; z-index: 51;
}
.clock-count .up-52 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 52s; animation-fill-mode: forwards; z-index: 52;
}
.clock-count .up-53 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 53s; animation-fill-mode: forwards; z-index: 53;
}
.clock-count .up-54 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 54s; animation-fill-mode: forwards; z-index: 54;
}
.clock-count .up-55 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 55s; animation-fill-mode: forwards; z-index: 55;
}
.clock-count .up-56 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 56s; animation-fill-mode: forwards; z-index: 56;
}
.clock-count .up-57 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 57s; animation-fill-mode: forwards; z-index: 57;
}
.clock-count .up-58 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 58s; animation-fill-mode: forwards; z-index: 58;
}
.clock-count .up-59 { transform: rotate3d(-1, 0, 0, 180deg); animation: flip-up-back 1s 1; animation-delay: 59s; animation-fill-mode: forwards; z-index: 59;
}
.clock-count .down-0 { animation: flip-up 1s 1; animation-delay: 1s; animation-fill-mode: forwards; z-index: 100;
}
.clock-count .down-1 { animation: flip-up 1s 1; animation-delay: 2s; animation-fill-mode: forwards; z-index: 99;
}
.clock-count .down-2 { animation: flip-up 1s 1; animation-delay: 3s; animation-fill-mode: forwards; z-index: 98;
}
.clock-count .down-3 { animation: flip-up 1s 1; animation-delay: 4s; animation-fill-mode: forwards; z-index: 97;
}
.clock-count .down-4 { animation: flip-up 1s 1; animation-delay: 5s; animation-fill-mode: forwards; z-index: 96;
}
.clock-count .down-5 { animation: flip-up 1s 1; animation-delay: 6s; animation-fill-mode: forwards; z-index: 95;
}
.clock-count .down-6 { animation: flip-up 1s 1; animation-delay: 7s; animation-fill-mode: forwards; z-index: 94;
}
.clock-count .down-7 { animation: flip-up 1s 1; animation-delay: 8s; animation-fill-mode: forwards; z-index: 93;
}
.clock-count .down-8 { animation: flip-up 1s 1; animation-delay: 9s; animation-fill-mode: forwards; z-index: 92;
}
.clock-count .down-9 { animation: flip-up 1s 1; animation-delay: 10s; animation-fill-mode: forwards; z-index: 91;
}
.clock-count .down-10 { animation: flip-up 1s 1; animation-delay: 11s; animation-fill-mode: forwards; z-index: 90;
}
.clock-count .down-11 { animation: flip-up 1s 1; animation-delay: 12s; animation-fill-mode: forwards; z-index: 89;
}
.clock-count .down-12 { animation: flip-up 1s 1; animation-delay: 13s; animation-fill-mode: forwards; z-index: 88;
}
.clock-count .down-13 { animation: flip-up 1s 1; animation-delay: 14s; animation-fill-mode: forwards; z-index: 87;
}
.clock-count .down-14 { animation: flip-up 1s 1; animation-delay: 15s; animation-fill-mode: forwards; z-index: 86;
}
.clock-count .down-15 { animation: flip-up 1s 1; animation-delay: 16s; animation-fill-mode: forwards; z-index: 85;
}
.clock-count .down-16 { animation: flip-up 1s 1; animation-delay: 17s; animation-fill-mode: forwards; z-index: 84;
}
.clock-count .down-17 { animation: flip-up 1s 1; animation-delay: 18s; animation-fill-mode: forwards; z-index: 83;
}
.clock-count .down-18 { animation: flip-up 1s 1; animation-delay: 19s; animation-fill-mode: forwards; z-index: 82;
}
.clock-count .down-19 { animation: flip-up 1s 1; animation-delay: 20s; animation-fill-mode: forwards; z-index: 81;
}
.clock-count .down-20 { animation: flip-up 1s 1; animation-delay: 21s; animation-fill-mode: forwards; z-index: 80;
}
.clock-count .down-21 { animation: flip-up 1s 1; animation-delay: 22s; animation-fill-mode: forwards; z-index: 79;
}
.clock-count .down-22 { animation: flip-up 1s 1; animation-delay: 23s; animation-fill-mode: forwards; z-index: 78;
}
.clock-count .down-23 { animation: flip-up 1s 1; animation-delay: 24s; animation-fill-mode: forwards; z-index: 77;
}
.clock-count .down-24 { animation: flip-up 1s 1; animation-delay: 25s; animation-fill-mode: forwards; z-index: 76;
}
.clock-count .down-25 { animation: flip-up 1s 1; animation-delay: 26s; animation-fill-mode: forwards; z-index: 75;
}
.clock-count .down-26 { animation: flip-up 1s 1; animation-delay: 27s; animation-fill-mode: forwards; z-index: 74;
}
.clock-count .down-27 { animation: flip-up 1s 1; animation-delay: 28s; animation-fill-mode: forwards; z-index: 73;
}
.clock-count .down-28 { animation: flip-up 1s 1; animation-delay: 29s; animation-fill-mode: forwards; z-index: 72;
}
.clock-count .down-29 { animation: flip-up 1s 1; animation-delay: 30s; animation-fill-mode: forwards; z-index: 71;
}
.clock-count .down-30 { animation: flip-up 1s 1; animation-delay: 31s; animation-fill-mode: forwards; z-index: 70;
}
.clock-count .down-31 { animation: flip-up 1s 1; animation-delay: 32s; animation-fill-mode: forwards; z-index: 69;
}
.clock-count .down-32 { animation: flip-up 1s 1; animation-delay: 33s; animation-fill-mode: forwards; z-index: 68;
}
.clock-count .down-33 { animation: flip-up 1s 1; animation-delay: 34s; animation-fill-mode: forwards; z-index: 67;
}
.clock-count .down-34 { animation: flip-up 1s 1; animation-delay: 35s; animation-fill-mode: forwards; z-index: 66;
}
.clock-count .down-35 { animation: flip-up 1s 1; animation-delay: 36s; animation-fill-mode: forwards; z-index: 65;
}
.clock-count .down-36 { animation: flip-up 1s 1; animation-delay: 37s; animation-fill-mode: forwards; z-index: 64;
}
.clock-count .down-37 { animation: flip-up 1s 1; animation-delay: 38s; animation-fill-mode: forwards; z-index: 63;
}
.clock-count .down-38 { animation: flip-up 1s 1; animation-delay: 39s; animation-fill-mode: forwards; z-index: 62;
}
.clock-count .down-39 { animation: flip-up 1s 1; animation-delay: 40s; animation-fill-mode: forwards; z-index: 61;
}
.clock-count .down-40 { animation: flip-up 1s 1; animation-delay: 41s; animation-fill-mode: forwards; z-index: 60;
}
.clock-count .down-41 { animation: flip-up 1s 1; animation-delay: 42s; animation-fill-mode: forwards; z-index: 59;
}
.clock-count .down-42 { animation: flip-up 1s 1; animation-delay: 43s; animation-fill-mode: forwards; z-index: 58;
}
.clock-count .down-43 { animation: flip-up 1s 1; animation-delay: 44s; animation-fill-mode: forwards; z-index: 57;
}
.clock-count .down-44 { animation: flip-up 1s 1; animation-delay: 45s; animation-fill-mode: forwards; z-index: 56;
}
.clock-count .down-45 { animation: flip-up 1s 1; animation-delay: 46s; animation-fill-mode: forwards; z-index: 55;
}
.clock-count .down-46 { animation: flip-up 1s 1; animation-delay: 47s; animation-fill-mode: forwards; z-index: 54;
}
.clock-count .down-47 { animation: flip-up 1s 1; animation-delay: 48s; animation-fill-mode: forwards; z-index: 53;
}
.clock-count .down-48 { animation: flip-up 1s 1; animation-delay: 49s; animation-fill-mode: forwards; z-index: 52;
}
.clock-count .down-49 { animation: flip-up 1s 1; animation-delay: 50s; animation-fill-mode: forwards; z-index: 51;
}
.clock-count .down-50 { animation: flip-up 1s 1; animation-delay: 51s; animation-fill-mode: forwards; z-index: 50;
}
.clock-count .down-51 { animation: flip-up 1s 1; animation-delay: 52s; animation-fill-mode: forwards; z-index: 49;
}
.clock-count .down-52 { animation: flip-up 1s 1; animation-delay: 53s; animation-fill-mode: forwards; z-index: 48;
}
.clock-count .down-53 { animation: flip-up 1s 1; animation-delay: 54s; animation-fill-mode: forwards; z-index: 47;
}
.clock-count .down-54 { animation: flip-up 1s 1; animation-delay: 55s; animation-fill-mode: forwards; z-index: 46;
}
.clock-count .down-55 { animation: flip-up 1s 1; animation-delay: 56s; animation-fill-mode: forwards; z-index: 45;
}
.clock-count .down-56 { animation: flip-up 1s 1; animation-delay: 57s; animation-fill-mode: forwards; z-index: 44;
}
.clock-count .down-57 { animation: flip-up 1s 1; animation-delay: 58s; animation-fill-mode: forwards; z-index: 43;
}
.clock-count .down-58 { animation: flip-up 1s 1; animation-delay: 59s; animation-fill-mode: forwards; z-index: 42;
}
@-webkit-keyframes flip-up /* Safari and Chrome */ { from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(1, 0, 0, 180deg); }
}
@-webkit-keyframes flip-up-back /* Safari and Chrome */ { from { transform: rotate3d(-1, 0, 0, 180deg); } to { transform: rotate3d(0, 0, 0, 0deg); }
}
@keyframes flip-up { from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(1, 0, 0, 180deg); }
}
@keyframes flip-up-back { from { transform: rotate3d(-1, 0, 0, 180deg); } to { transform: rotate3d(0, 0, 0, 0deg); }
}
@-webkit-keyframes fade /* Safari and Chrome */ { 0% { opacity: 0; -webkit-filter: blur(2px); } 25% { opacity: 1; -webkit-filter: blur(0px); } 75% { opacity: 1; -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-filter: blur(2px); }
}
@keyframes fade { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; }
}

Flat css-only countdown and countup - Script Codes JS Codes

/* Pure CSS */
Flat css-only countdown and countup - Script Codes
Flat css-only countdown and countup - Script Codes
Home Page Home
Developer Daniesy
Username daniesy
Uploaded January 10, 2023
Rating 4
Size 11,156 Kb
Views 6,072
Do you need developer help for Flat css-only countdown and countup?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniesy (daniesy) Script Codes
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!