Hi there, I'm encountering an issue when trying to combine CSS transitions and animations. It seems that when I add a transition, it cancels out the animation that is working. Does anyone have any insights on how to successfully merge them together?
Below is the CSS code:
.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;
transform: scale(1.25);
}
.success li:hover .circle-spin {
animation: spin 10s linear infinite;
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);
}
}
I apologize for the amount of code, but it's necessary for understanding the issue at hand.
Thank you!