cup_of cup_of - 3 months ago 10
CSS Question

Combining CSS transition and animations together?

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

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.