style upgrades
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user