User:Xeverything11/sandbox/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;}
}

.tasks-group {
    display: inline-block;
    height: 1.5em;
    width: 5em;
    border: 1px solid black;
    vertical-align: middle;
}

.tasks-group-inner {
    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;
}

.task-cooking {
    animation-delay: 0s;
}

.task-crafting {
    animation-delay: -4s;
}

.task-solving {
    animation-delay: -8s;
}

.task-building {
    animation-delay: -12s;
}