SkyHow/styles.css

@keyframes task-element {
    0% {transform: translateY(0); opacity: 1;}
    22% {transform: translateY(0); opacity: 1;}
    25% {transform: translateY(-2em); opacity: 1;}
    30% {transform: translateY(-2em); opacity: 0;}
    92% {transform: translateY(2em); opacity: 0;}
    97% {transform: translateY(2em); opacity: 1;}
    100% {transform: translateY(0); opacity: 1;}
}

@keyframes task-background {
    0% {background: var(--color-error-lightest1);}
    22% {background: var(--color-error-lightest2);}
    25% {background: var(--color-warning-lightest1);}
    47% {background: var(--color-warning-lightest2);}
    50% {background: var(--color-success-lightest1);}
    72% {background: var(--color-success-lightest2);}
    75% {background: var(--color-info-lightest1);}
    97% {background: var(--color-info-lightest2);}
    100% {background: var(--color-error-lightest1);}
}

.tasks-group {
    display: inline-block;
    height: 1.5em;
    width: 6em;
    border-radius: 0.2em;
    vertical-align: -30%;
    animation: task-background 16s infinite;
    overflow: hidden;
    position: relative;
}

.task-element {
    display: flex;
    line-height: 1.5em;
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    animation: task-element 16s infinite cubic-bezier(0.3, 0, 0.6, 1.3);
    font-weight: bold;
}

.task-cooking {
    animation-delay: 0s;
    color: var(--color-error-darker1);
}

.task-crafting {
    animation-delay: -12s;
    color: var(--color-warning-darker1);
}

.task-solving {
    animation-delay: -8s;
    color: var(--color-success-darker1);
}

.task-building {
    animation-delay: -4s;
    color: var(--color-info-darker1);
}