将 CSS 过渡和动画结合在一起？

Question

您好，我在将 css 过渡和动画组合在一起时遇到问题。动画正在工作，但由于某种原因，当我添加过渡时，过渡有效，但取消了动画。有人知道如何将它们结合起来吗？

这是我的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); } }

抱歉，我知道有很多代码，但这就是这个问题所需的最少代码。

谢谢

Answer 1

它\xe2\x80\x99s导致你的转变

\n

/* in :hover */\ntransform:scale(1.25);\n

\n

覆盖动画中的变换

\n

/* in animation */\ntransform:rotate(360deg);\n

\n

您必须将不同元素的转换分开。请参阅我的 codepen。

\n