37 lines
508 B
CSS
37 lines
508 B
CSS
.time {
|
|
transition: color 300ms ease-out;
|
|
}
|
|
|
|
.seconds {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tick {
|
|
animation: digit-tick 200ms ease-out;
|
|
}
|
|
|
|
.finalTick {
|
|
animation: final-tick 250ms ease-out;
|
|
}
|
|
|
|
@keyframes digit-tick {
|
|
from {
|
|
opacity: 0.2;
|
|
transform: translateY(-0.12em);
|
|
}
|
|
}
|
|
|
|
@keyframes final-tick {
|
|
from {
|
|
opacity: 0.4;
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tick,
|
|
.finalTick {
|
|
animation: none;
|
|
}
|
|
}
|