CSSトランジションとアニメーションを組み合わせる？

Question

こんにちは私は両方のCSSトランジションとアニメーションを組み合わせるのに問題があります。アニメーションは機能していますが、トランジションを追加する何らかの理由で、トランジションは機能しますが、アニメーションが取り消されます。誰もそれらを組み合わせる方法を知っていますか？

は、ここに私のCSSです：私はそれがコードの多くのですが、この質問のために必要な最小限のコードをthatsの知っている

.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); } } 

申し訳ありません。

おかげ

Answer 1

それはあなたの変換

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

オーバーライドはあなたが別の要素に変換を分離する必要が

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

animaton

に変換引き起こします。 my codepenを参照してください。