Skip to content

Instantly share code, notes, and snippets.

@roytomeij
Created June 11, 2015 11:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save roytomeij/c05c175f1aa5220d9943 to your computer and use it in GitHub Desktop.
Save roytomeij/c05c175f1aa5220d9943 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="time"></div>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
$times-string: "";
@for $hour from 1 through 23 {
$times-string: "#{$times-string}#{if($hour < 10, "0#{$hour}", $hour)}:00";
}
@keyframes clock {
@for $i from 0 to 23 {
#{$i * 4.166666667}% {
text-indent: $i * 5 * -1ch;
}
}
}
.time::before {
content: $times-string;
width: 90px;
height: 35px;
display: block;
overflow: hidden;
font-family: monospace;
font-size: 30px;
text-indent: 0;
color: #fff;
background: #000;
animation-name: clock;
animation-duration: 4s;
animation-timing-function: steps(1, start);
}
@keyframes clock {
0% {
text-indent: 0ch;
}
4.16667% {
text-indent: -5ch;
}
8.33333% {
text-indent: -10ch;
}
12.5% {
text-indent: -15ch;
}
16.66667% {
text-indent: -20ch;
}
20.83333% {
text-indent: -25ch;
}
25.0% {
text-indent: -30ch;
}
29.16667% {
text-indent: -35ch;
}
33.33333% {
text-indent: -40ch;
}
37.5% {
text-indent: -45ch;
}
41.66667% {
text-indent: -50ch;
}
45.83333% {
text-indent: -55ch;
}
50.0% {
text-indent: -60ch;
}
54.16667% {
text-indent: -65ch;
}
58.33333% {
text-indent: -70ch;
}
62.5% {
text-indent: -75ch;
}
66.66667% {
text-indent: -80ch;
}
70.83333% {
text-indent: -85ch;
}
75.0% {
text-indent: -90ch;
}
79.16667% {
text-indent: -95ch;
}
83.33333% {
text-indent: -100ch;
}
87.5% {
text-indent: -105ch;
}
91.66667% {
text-indent: -110ch;
}
}
.time::before {
content: "01:0002:0003:0004:0005:0006:0007:0008:0009:0010:0011:0012:0013:0014:0015:0016:0017:0018:0019:0020:0021:0022:0023:00";
width: 90px;
height: 35px;
display: block;
overflow: hidden;
font-family: monospace;
font-size: 30px;
text-indent: 0;
color: #fff;
background: #000;
animation-name: clock;
animation-duration: 4s;
animation-timing-function: steps(1, start);
}
<div class="time"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment