.number-roll {
    position: relative;
    display: inline-block;
    height: 1.2em;
    min-width: 1.5ch;
    overflow: hidden;
    vertical-align: middle;
}

.number-roll .number-current,
.number-roll .number-next {
    display: block;
    line-height: 1.2em;
}

.number-roll .number-next {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(110%);
    opacity: 0;
    color: #f87171;
}

.number-roll.rolling .number-current {
    animation: oldNumberUp .45s ease forwards;
}

.number-roll.rolling .number-next {
    animation: newNumberUp .45s ease forwards;
}

@keyframes oldNumberUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-110%); opacity: 0; }
}

@keyframes newNumberUp {
    from { transform: translateY(110%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}