Flat css-only countdown and countup

Developer

Size

11,156 Kb

Views

6,072

Flat css-only countdown and countup Previews
Flat css-only countdown and countup HTML Codes
Flat css-only countdown and countup CSS Codes
Flat css-only countdown and countup JS Codes

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 */

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

Name	Size
Grand Theft Auto 5	3,120 Kb
OsX Mavericks	2,182 Kb
CSS Switches	2,995 Kb
MSlider 3D	3,717 Kb
Codepen Inception	4,495 Kb
Cookie box	2,560 Kb
Badge 2	4,692 Kb
Profile pictures	3,985 Kb
Simple Dropdown - Vue.js	3,925 Kb
Full CSS3 Dropdown Menu	2,946 Kb

Create amazing blog posts 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!

Similar Scripts & Codes

Name	Username	Size
Testing Portfolio Page	Sideshowli	3,395 Kb
Responsive Section hover effect to show content	Berdejitendra	2,540 Kb
Wikipedia Viewer	Odylic	2,333 Kb
Sticky notes with CSS3	HaiNguyen007	2,146 Kb
Hovers with popups	Zacharyolson	2,380 Kb
Responsive Pricing Table	Jeremycaris	2,690 Kb
Improve	Gavra	1,652 Kb
Kudos Please	TimPietrusky	6,624 Kb
Cut and Paste Roll Link	BottomlineInteractive	2,546 Kb
APortfolio	Skybutterfly	5,174 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!