Combining CSS transition and animations together?

Question

Hello I am having trouble combining both css transition and animations together. The animation is working but some reason when I add a transition, the transition works, but cancels out the animation. Anyone know how to combine them?

Here is my CSS:

.circle-spin {
    transition: all 1s ease;
}

.circle-spin-reverse {
    transition: all 1s ease;
}

.success li:hover .circle-spin-reverse {
    animation:spin-reverse 10s linear infinite;
    /* the above works until i add the transition below */

    transform:scale(1.25);
}

.success li:hover .circle-spin {
    animation:spin 10s linear infinite;
    /* the above works until i add the transition below */

    transform:scale(1.25);
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@keyframes spin-reverse { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }

Sorry I know it's alot of code, but thats the bare minimum code needed for this question.

Thanks

Answer 1

It’s cause your transform

/* in :hover */
transform:scale(1.25);

overrides transform in animaton

/* in animation */
transform:rotate(360deg);

You have to separate transforms to different elements. See my codepen.