@keyframes rotate {
    0% {
        transform: rotate(90deg) scaleY(-1);
    }

    50% {
        transform: rotate(90deg) scaleY(1);
    }

    100% {
        transform: rotate(90deg) scaleY(-1);
    }
}

#colon-three {
    display: inline-block;
    font-style: normal;
    font-family: "Comic Sans MS", "Comic Sans", "Comic Neue", sans-serif;

    animation-name: rotate;
    animation-duration: 90s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
}

#colon-three::before {
    content: ":";
}

#colon-three:hover::before {
    content: ";";
}