CSS-Übergang und Animationen zusammen kombinieren?

Question

Hallo Ich habe Probleme beim Kombinieren von CSS-Übergang und Animationen zusammen. Die Animation funktioniert, aber wenn ich einen Übergang hinzufüge, funktioniert der Übergang, aber die Animation wird abgebrochen. Wer weiß, wie man sie kombiniert?

Hier ist meine 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, ich weiß, dass es eine Menge Code ist, aber das ist das absolute Minimum Code für diese Frage benötigt.

Dank

Answer 1

Es ist dazu führen, dass verwandeln

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

Überschreibungen in animaton

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

Sie haben zu trennen Transformationen auf verschiedene Elemente verwandeln. Siehe my codepen.